/* ==========================================================================
   Lukas Fliser - system wizualny
   --------------------------------------------------------------------------
   Uklad: redakcyjny, asymetryczny, duzo kontrolowanej przestrzeni.
   Kolorystyka: ciepla kreda, piasek, kamien, glina, ciemny braz.
   Kazda wartosc jest zmienna CSS, zeby Elementor (globalne kolory i fonty)
   oraz uzytkownik mogli nadpisac wyglad bez dotykania tego pliku.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeny
   -------------------------------------------------------------------------- */
:root {
	/* Paleta. Odcienie ziemi: kreda -> piasek -> kamien -> glina -> braz -> tusz.
	   Glina jest jedynym kolorem akcentujacym i celowo wystepuje oszczednie. */
	--lf-cream: #f3efe9;
	--lf-sand: #e8e0d5;
	--lf-stone: #d8cdbe;
	/*
	 * Akcent wyprowadzony ze zlota z logo (gradient #A48A58 -> #C9B99A).
	 * Same zlota z logo nie da sie uzyc jako koloru tekstu na kredzie -
	 * daje 2,9:1, czyli ponizej progu czytelnosci. Stad dwa tony: glebszy
	 * na jasnych tlach (4,9:1) i jasniejszy na ciemnych (9,6:1).
	 */
	--lf-clay: #7e6437;
	--lf-clay-dark: #6b5430;
	--lf-gold: #a48a58;
	--lf-gold-light: #c9b99a;
	--lf-brown: #4a3b31;
	--lf-ink: #171210;
	--lf-text: #4f4740;
	--lf-muted: #8c8278;
	--lf-white: #ffffff;

	/* Role - komponenty siegaja po role, nie po nazwy kolorow. Dzieki temu
	   zmiana palety w jednym miejscu przechodzi przez caly serwis. */
	--lf-bg: var(--lf-cream);
	--lf-bg-alt: var(--lf-sand);
	--lf-fg: var(--lf-text);
	--lf-heading: var(--lf-ink);
	--lf-accent: var(--lf-clay);
	--lf-line: rgba(23, 18, 16, 0.12);
	--lf-line-soft: rgba(23, 18, 16, 0.07);

	/* Typografia. Skala plynna - jeden clamp zamiast czterech breakpointow. */
	--lf-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--lf-fs-body: clamp(0.975rem, 0.93rem + 0.22vw, 1.0625rem);
	--lf-fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
	--lf-fs-eyebrow: 0.72rem;
	--lf-fs-h1: clamp(2.55rem, 1.35rem + 5.2vw, 5.6rem);
	--lf-fs-h2: clamp(1.95rem, 1.2rem + 3.1vw, 3.6rem);
	--lf-fs-h3: clamp(1.35rem, 1.1rem + 1.05vw, 1.95rem);
	--lf-fs-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
	--lf-fs-display: clamp(3.2rem, 1rem + 9.5vw, 9rem);
	--lf-lh-tight: 1.06;
	--lf-lh-heading: 1.12;
	--lf-lh-body: 1.75;
	--lf-ls-heading: -0.015em;
	--lf-ls-eyebrow: 0.2em;

	/* Rytm. Odstep sekcji jest jeden - powtarzalnosc buduje spokoj strony. */
	--lf-container: 1300px;
	--lf-container-narrow: 900px;
	--lf-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
	--lf-section-y: clamp(4.5rem, 2.2rem + 8vw, 9rem);
	--lf-gap: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);

	/* Ruch. Jedna krzywa dla wszystkiego - jedwabista, bez odbicia. */
	--lf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--lf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--lf-dur: 0.75s;
	--lf-dur-fast: 0.35s;

	/* Zaslona boczna pod tekstem hero - osobno dla jasnego i ciemnego wariantu. */
	--lf-hero-side: rgba(243, 239, 233, 0.82);
	/* Winieta na zdjeciu w tle. Na kredzie ledwie muska rogi, na tuszu
	   scisza je na tyle, ze srodek kadru sam wychodzi na pierwszy plan. */
	--lf-hero-vignette: rgba(23, 18, 16, 0.10);

	--lf-radius: 2px;
	--lf-shadow: 0 24px 60px -32px rgba(23, 18, 16, 0.35);
}

/* --------------------------------------------------------------------------
   2. Reset i podstawy
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Kotwice nie moga chowac sie pod przyklejonym naglowkiem. */
	scroll-padding-top: 7rem;
}

body {
	margin: 0;
	background: var(--lf-bg);
	color: var(--lf-fg);
	font-family: var(--lf-font);
	font-size: var(--lf-fs-body);
	font-weight: 400;
	line-height: var(--lf-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Zadna dekoracja nie ma prawa wypchnac strony w bok. */
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--lf-heading);
	font-weight: 500;
	line-height: var(--lf-lh-heading);
	letter-spacing: var(--lf-ls-heading);
	text-wrap: balance;
}

h1 { font-size: var(--lf-fs-h1); line-height: var(--lf-lh-tight); }
h2 { font-size: var(--lf-fs-h2); }
h3 { font-size: var(--lf-fs-h3); }
h4 { font-size: var(--lf-fs-h4); }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.95rem; }

p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0 0 1.25em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

blockquote {
	margin: 2.5rem 0;
	padding: 0 0 0 clamp(1.25rem, 3vw, 2.25rem);
	border-left: 1px solid var(--lf-stone);
	color: var(--lf-heading);
	font-size: var(--lf-fs-lead);
	font-style: normal;
	line-height: 1.5;
}

hr { height: 1px; margin: 3rem 0; border: 0; background: var(--lf-line); }

code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; }
pre { padding: 1.25rem; overflow-x: auto; background: var(--lf-sand); border-radius: var(--lf-radius); }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--lf-line); text-align: left; }
th { font-weight: 500; color: var(--lf-heading); }

::selection { background: var(--lf-brown); color: var(--lf-cream); }

/* Widoczny fokus - wymog dostepnosci klawiaturowej. Tylko dla nawigacji
   klawiatura, zeby klikniecie myszka nie rysowalo obwodki. */
:focus-visible {
	outline: 2px solid var(--lf-clay);
	outline-offset: 3px;
	border-radius: var(--lf-radius);
}

/* Link pomijajacy nawigacje - pierwszy przystanek tabulatora. */
.lf-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--lf-ink);
	color: var(--lf-cream);
	font-size: 0.85rem;
	transition: top var(--lf-dur-fast) var(--lf-ease);
}
.lf-skip-link:focus { top: 1rem; }

.lf-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Uklad
   -------------------------------------------------------------------------- */
.lf-container {
	width: 100%;
	max-width: var(--lf-container);
	margin-inline: auto;
	padding-inline: var(--lf-gutter);
}
.lf-container--narrow { max-width: var(--lf-container-narrow); }
.lf-container--wide { max-width: 1620px; }

.lf-section { padding-block: var(--lf-section-y); }
.lf-section--tight { padding-block: calc(var(--lf-section-y) * 0.6); }
.lf-section--sand { background: var(--lf-bg-alt); }
.lf-section--dark { background: var(--lf-ink); color: rgba(243, 239, 233, 0.72); }
.lf-section--dark h1,
.lf-section--dark h2,
.lf-section--dark h3,
.lf-section--dark h4,
.lf-section--dark h5,
.lf-section--dark h6 { color: var(--lf-cream); }

/* --------------------------------------------------------------------------
   4. Elementy typograficzne wspolne dla sekcji
   -------------------------------------------------------------------------- */

/* Etykieta sekcji - male wersaliki z kreska. Powtarza sie w calym serwisie
   i jest glownym sygnalem "to jest nowy rozdzial strony". */
.lf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	color: var(--lf-clay);
	font-size: var(--lf-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--lf-ls-eyebrow);
	text-transform: uppercase;
	line-height: 1;
}
.lf-eyebrow::before {
	content: "";
	width: clamp(1.5rem, 3vw, 2.75rem);
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}
.lf-eyebrow--plain::before { display: none; }
.lf-section--dark .lf-eyebrow { color: var(--lf-stone); }

.lf-heading-widget__title--small {
	font-size: var(--lf-fs-h4);
	letter-spacing: -0.005em;
}

.lf-lead {
	max-width: 46ch;
	/*
	 * Rola, nie kolor z palety. --lf-text to staly odcien dla jasnych tel;
	 * uzyty tutaj sprawial, ze akapit w ciemnym hero zostawal ciemnobrazowy
	 * na tuszu (1,7:1). --lf-fg przelacza sie razem z sekcja.
	 */
	color: var(--lf-fg);
	font-size: var(--lf-fs-lead);
	line-height: 1.65;
}

.lf-display {
	font-size: var(--lf-fs-display);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

/* Naglowek sekcji zestawiony z tekstem po prawej - podstawowy uklad
   redakcyjny powtarzany w kilku sekcjach. */
.lf-section-head {
	display: grid;
	gap: var(--lf-gap);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.lf-section-head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.lf-section-head h2 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Przyciski i linki
   -------------------------------------------------------------------------- */
.lf-btn {
	--btn-bg: var(--lf-ink);
	--btn-fg: var(--lf-cream);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 1.05rem 2rem;
	border: 1px solid var(--btn-bg);
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--lf-dur-fast) var(--lf-ease-soft),
		border-color var(--lf-dur-fast) var(--lf-ease-soft);
	/* Duzy obszar dotykowy niezaleznie od paddingu wizualnego. */
	min-height: 48px;
}

/* Wypelnienie wjezdza od dolu - zamiana kolorow bez migniecia. */
.lf-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--lf-clay);
	transform: translateY(101%);
	transition: transform var(--lf-dur) var(--lf-ease);
}
.lf-btn:hover,
.lf-btn:focus-visible { color: var(--lf-white); border-color: var(--lf-clay); }
.lf-btn:hover::after,
.lf-btn:focus-visible::after { transform: translateY(0); }

.lf-btn__arrow { width: 1em; height: 1em; flex: none; transition: transform var(--lf-dur-fast) var(--lf-ease); }
.lf-btn:hover .lf-btn__arrow { transform: translateX(3px); }

.lf-btn--ghost { --btn-bg: transparent; --btn-fg: var(--lf-ink); border-color: var(--lf-ink); }
.lf-btn--light { --btn-bg: var(--lf-cream); --btn-fg: var(--lf-ink); }
.lf-btn--outline-light { --btn-bg: transparent; --btn-fg: var(--lf-cream); border-color: rgba(243, 239, 233, 0.45); }
.lf-btn--small { padding: 0.8rem 1.4rem; font-size: 0.75rem; }

/* Link tekstowy z animowanym podkresleniem: kreska wyjezdza w lewo
   i wraca od prawej, wiec ruch czyta sie jako jeden gest, nie mrugniecie. */
.lf-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 3px;
	color: var(--lf-heading);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}
.lf-link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform-origin: right;
	transform: scaleX(1);
	transition: transform var(--lf-dur) var(--lf-ease);
}
.lf-link:hover::after,
.lf-link:focus-visible::after {
	animation: lf-underline var(--lf-dur) var(--lf-ease);
}
@keyframes lf-underline {
	0%   { transform: scaleX(1); transform-origin: right; }
	49%  { transform: scaleX(0); transform-origin: right; }
	50%  { transform: scaleX(0); transform-origin: left; }
	100% { transform: scaleX(1); transform-origin: left; }
}
.lf-link__arrow { width: 0.85em; height: 0.85em; transition: transform var(--lf-dur-fast) var(--lf-ease); }
.lf-link:hover .lf-link__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Media
   -------------------------------------------------------------------------- */

/* Ramka kadrujaca. Proporcje ustawia sie zmienna, wiec ten sam komponent
   obsluguje portret, kwadrat i panorame bez dodatkowych klas. */
.lf-media {
	position: relative;
	overflow: hidden;
	background: var(--lf-stone);
	aspect-ratio: var(--lf-ratio, 4 / 3);
}
.lf-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--lf-ease);
}
.lf-media--portrait { --lf-ratio: 3 / 4; }
.lf-media--square { --lf-ratio: 1 / 1; }
.lf-media--wide { --lf-ratio: 16 / 9; }
.lf-media--tall { --lf-ratio: 2 / 3; }

.lf-zoom:hover .lf-media img,
.lf-zoom:focus-visible .lf-media img { transform: scale(1.06); }

/* Znacznik materialu zastepczego - ma byc widoczny dla wlasciciela strony,
   ale nie krzyczec na odwiedzajacym. */
.lf-media__placeholder-tag {
	position: absolute;
	left: 0.75rem; bottom: 0.75rem;
	z-index: 2;
	padding: 0.35rem 0.6rem;
	background: rgba(23, 18, 16, 0.62);
	color: rgba(243, 239, 233, 0.92);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Silnik animacji
   --------------------------------------------------------------------------
   Kazdy element z data-lf-reveal startuje przesuniety i przezroczysty,
   a klase .is-in dodaje IntersectionObserver. Gdy JavaScript nie wystartuje,
   .no-js w <html> pokazuje wszystko od razu - tresc nigdy nie znika.
   -------------------------------------------------------------------------- */
[data-lf-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--lf-dur) var(--lf-ease), transform var(--lf-dur) var(--lf-ease);
	transition-delay: var(--lf-delay, 0ms);
	will-change: opacity, transform;
}
[data-lf-reveal].is-in { opacity: 1; transform: none; }
[data-lf-reveal="fade"] { transform: none; }
[data-lf-reveal="left"] { transform: translateX(-32px); }
[data-lf-reveal="right"] { transform: translateX(32px); }
[data-lf-reveal="scale"] { transform: scale(0.96); }

/* Maska odslaniajaca zdjecie - kurtyna jedzie w gore, obraz w tym czasie
   wraca ze zblizenia. Dwa ruchy naraz daja wrazenie glebi. */
[data-lf-mask] { position: relative; overflow: hidden; }
[data-lf-mask]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--lf-bg);
	transform-origin: bottom;
	transition: transform 1.15s var(--lf-ease);
}
[data-lf-mask].is-in::after { transform: scaleY(0); }
[data-lf-mask] > img,
[data-lf-mask] .lf-media img { transform: scale(1.12); transition: transform 1.5s var(--lf-ease); }
[data-lf-mask].is-in > img,
[data-lf-mask].is-in .lf-media img { transform: scale(1); }

/* Naglowek odslaniany wiersz po wierszu. Podzialu na wiersze dokonuje
   JavaScript po zmierzeniu realnego lamania tekstu, wiec dziala przy
   dowolnej dlugosci i po zmianie szerokosci okna. */
/*
 * Maska jest zalozona na pojedyncze slowo, nie na przebudowany wiersz -
 * dzieki temu wyroznienia w naglowku (<em>, <strong>) zachowuja swoj kolor.
 * Opoznienie jest wspolne dla slow z tego samego wiersza, wiec ruch nadal
 * czyta sie jako odslanianie wiersz po wierszu.
 *
 * Wciecie i ujemny margines na dole robia miejsce na ogonki liter - bez nich
 * overflow ucinalby "ą", "ę" i "j".
 */
.lf-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.16em;
	margin-bottom: -0.16em;
}
.lf-word > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 0.95s var(--lf-ease);
	transition-delay: var(--lf-line-delay, 0ms);
}
.is-in .lf-word > span { transform: translateY(0); }

/* Uzytkownik z wylaczonymi animacjami dostaje ten sam uklad, tylko bez ruchu.
   Nie zostawiamy zadnego stanu poczatkowego, ktory ukrywalby tresc. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-lf-reveal] { opacity: 1 !important; transform: none !important; }
	[data-lf-mask]::after { display: none; }
	[data-lf-mask] > img,
	[data-lf-mask] .lf-media img { transform: none !important; }
	.lf-word > span { transform: none !important; }
}

/* Bez JavaScriptu nic nie moze pozostac niewidoczne. */
.no-js [data-lf-reveal] { opacity: 1; transform: none; }
.no-js [data-lf-mask]::after { display: none; }
.no-js .lf-word > span { transform: none; }

/* --------------------------------------------------------------------------
   8. Naglowek strony
   --------------------------------------------------------------------------
   Naglowek jest przyklejony od pierwszego piksela. Nad sekcja hero jest
   przezroczysty i jasny, po przewinieciu dostaje kremowe tlo i ciemny tekst.
   Przelaczaniem klasy .is-stuck zajmuje sie IntersectionObserver, a nie
   nasluch scrolla - dzieki temu nie liczymy nic przy kazdej klatce.
   -------------------------------------------------------------------------- */
.lf-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	/* Domyslnie ciemny tekst: wiekszosc stron otwiera sie jasnym tlem, wiec
	   jasny naglowek bylby na nim niewidoczny. Wersje jasna wlacza osobna
	   klasa - tylko tam, gdzie pod naglowkiem faktycznie jest ciemne zdjecie. */
	color: var(--lf-ink);
	transition: background-color var(--lf-dur) var(--lf-ease),
		color var(--lf-dur) var(--lf-ease),
		box-shadow var(--lf-dur) var(--lf-ease);
}

/* Naglowek nad ciemnym zdjeciem otwierajacym podstrone. */
.lf-header--over-media { color: var(--lf-cream); }
.lf-header--over-media.is-stuck { color: var(--lf-ink); }
.lf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lf-gap);
	min-height: clamp(78px, 6.5vw, 104px);
	transition: min-height var(--lf-dur) var(--lf-ease);
}
.lf-header::after {
	/* Cienka linia zamiast cienia - spokojniejsza i zgodna z estetyka. */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--lf-line);
	opacity: 0;
	transition: opacity var(--lf-dur) var(--lf-ease);
}
.lf-header.is-stuck {
	background: rgba(243, 239, 233, 0.94);
	color: var(--lf-ink);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
}
.lf-header.is-stuck::after { opacity: 1; }
.lf-header.is-stuck .lf-header__inner { min-height: clamp(68px, 5.4vw, 86px); }

/* Strony bez sekcji hero (blog, kontakt, wyniki) nie maja ciemnego zdjecia
   pod naglowkiem, wiec naglowek od razu jest w wersji jasnej. */
.lf-header--solid { background: var(--lf-cream); color: var(--lf-ink); }
.lf-header--solid::after { opacity: 1; }

/* Wysokosc naglowka oddana zawartosci, gdy nie ma pelnoekranowego hero. */
.lf-header-spacer { height: clamp(78px, 6.5vw, 104px); }

.lf-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	flex: none;
}
.lf-logo img {
	width: auto;
	/* Logo marki to uklad pietrowy: znak nad napisem. Przy wysokosci dobranej
	   pod logo poziome napis "LUKAS FLISER" robil sie nieczytelny. */
	height: clamp(42px, 3.6vw, 56px);
	transition: height var(--lf-dur) var(--lf-ease);
}
.lf-header.is-stuck .lf-logo img { height: clamp(36px, 3vw, 46px); }

/* Zapasowy znak slowny uzywany, dopoki wlasciciel nie wgra logo w Kokpicie.
   To nie jest projekt logo - to sam zapis nazwy krojem serwisu. */
.lf-logo__wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: inherit;
}
.lf-logo__wordmark b { font-weight: 500; }
.lf-logo__wordmark i {
	font-style: normal;
	font-weight: 300;
	opacity: 0.72;
}

/* Nawigacja pozioma */
.lf-nav { display: none; }
@media (min-width: 1025px) {
	.lf-nav { display: block; }
}
.lf-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.2vw, 2.5rem);
	margin: 0; padding: 0;
	list-style: none;
}
.lf-nav li { position: relative; margin: 0; }
.lf-nav a {
	position: relative;
	display: block;
	padding: 0.5rem 0;
	color: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* Podkreslenie wyjezdza od lewej; strona aktywna ma je na stale. */
.lf-nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0.15rem;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lf-dur) var(--lf-ease);
}
.lf-nav a:hover::after,
.lf-nav a:focus-visible::after,
.lf-nav .current-menu-item > a::after,
.lf-nav .current-menu-ancestor > a::after,
.lf-nav .current_page_item > a::after { transform: scaleX(1); }

/* Podmenu */
.lf-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: -1.25rem;
	z-index: 20;
	display: block;
	min-width: 240px;
	padding: 0.75rem 0;
	background: var(--lf-cream);
	border: 1px solid var(--lf-line-soft);
	box-shadow: var(--lf-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--lf-dur-fast) var(--lf-ease),
		transform var(--lf-dur-fast) var(--lf-ease),
		visibility var(--lf-dur-fast);
}
.lf-nav li:hover > .sub-menu,
.lf-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lf-nav .sub-menu a {
	padding: 0.6rem 1.25rem;
	color: var(--lf-text);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: none;
	white-space: normal;
	transition: color var(--lf-dur-fast) var(--lf-ease), background-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-nav .sub-menu a::after { display: none; }
.lf-nav .sub-menu a:hover,
.lf-nav .sub-menu a:focus-visible { color: var(--lf-ink); background: var(--lf-sand); }
.lf-nav .sub-menu .sub-menu { top: -0.75rem; left: 100%; }

/* Strzalka przy pozycji z podmenu */
.lf-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: -0.9rem; top: 50%;
	width: 5px; height: 5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}
.lf-nav .menu-item-has-children { margin-right: 0.9rem; }

.lf-header__actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.lf-header__cta { display: none; }
@media (min-width: 1025px) { .lf-header__cta { display: inline-flex; } }

/* W wersji przezroczystej przycisk musi byc czytelny na zdjeciu. */
.lf-header--over-media:not(.is-stuck) .lf-btn--header {
	--btn-bg: transparent;
	--btn-fg: var(--lf-cream);
	border-color: rgba(243, 239, 233, 0.5);
}

/* Przelacznik menu mobilnego */
.lf-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px; height: 48px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
@media (min-width: 1025px) { .lf-burger { display: none; } }
.lf-burger span {
	display: block;
	width: 100%; height: 1.5px;
	background: currentColor;
	transition: transform var(--lf-dur-fast) var(--lf-ease), opacity var(--lf-dur-fast) var(--lf-ease);
}
.lf-burger span:nth-child(2) { width: 70%; margin-left: auto; }

/* --------------------------------------------------------------------------
   9. Menu mobilne
   --------------------------------------------------------------------------
   Pelnoekranowa szuflada. Pozycje wjezdzaja kaskadowo, opoznienie liczone
   zmienna --i ustawiana w szablonie, wiec CSS nie zna liczby pozycji.
   -------------------------------------------------------------------------- */
.lf-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--lf-cream);
	color: var(--lf-ink);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--lf-dur) var(--lf-ease), visibility var(--lf-dur);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.lf-drawer.is-open { visibility: visible; opacity: 1; }
body.lf-drawer-open { overflow: hidden; }

.lf-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: clamp(78px, 6.5vw, 104px);
}
.lf-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform var(--lf-dur-fast) var(--lf-ease);
}
.lf-drawer__close:hover { transform: rotate(90deg); }
.lf-drawer__close svg { width: 20px; height: 20px; }

.lf-drawer__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	padding-block: 2rem 3rem;
}
.lf-drawer nav ul { margin: 0; padding: 0; list-style: none; }
.lf-drawer nav > ul > li {
	margin: 0;
	border-bottom: 1px solid var(--lf-line-soft);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s var(--lf-ease), transform 0.5s var(--lf-ease);
	transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.lf-drawer.is-open nav > ul > li { opacity: 1; transform: none; }
.lf-drawer nav > ul > li > a {
	display: block;
	padding: 0.85rem 0;
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--lf-heading);
	transition: color var(--lf-dur-fast) var(--lf-ease), padding-left var(--lf-dur-fast) var(--lf-ease);
}
.lf-drawer nav > ul > li > a:hover { color: var(--lf-clay); padding-left: 0.5rem; }

/* Podmenu w szufladzie rozwija sie przyciskiem, zeby rodzic zostal klikalny.
   Zwijanie dziala na opakowaniu, nie na samej liscie: grid-template-rows
   sciaga tylko pierwsze dziecko siatki, wiec lista wielu pozycji musi byc
   dla niej jednym elementem. */
.lf-drawer__sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lf-dur) var(--lf-ease);
}
.lf-drawer__sub > .sub-menu {
	overflow: hidden;
	padding-left: 0.85rem;
	margin: 0;
	list-style: none;
}
.lf-drawer li.is-expanded > .lf-drawer__sub { grid-template-rows: 1fr; }
.lf-drawer .sub-menu li { margin: 0; }
.lf-drawer .sub-menu a {
	display: block;
	padding: 0.5rem 0;
	color: var(--lf-text);
	font-size: 1rem;
}
.lf-drawer__toggle {
	position: absolute;
	right: 0; top: 0.6rem;
	width: 40px; height: 40px;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform var(--lf-dur-fast) var(--lf-ease), background-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-drawer__toggle::before,
.lf-drawer__toggle::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 11px; height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--lf-dur-fast) var(--lf-ease);
}
.lf-drawer__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.lf-drawer li.is-expanded > .lf-drawer__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.lf-drawer nav > ul > li { position: relative; }

.lf-drawer__foot {
	display: grid;
	gap: 1.25rem;
	padding-bottom: 2.5rem;
	border-top: 1px solid var(--lf-line-soft);
	padding-top: 2rem;
}
.lf-drawer__contact { display: grid; gap: 0.35rem; font-size: 0.95rem; }
.lf-drawer__contact a { color: var(--lf-heading); }
.lf-drawer__contact a:hover { color: var(--lf-clay); }

/* --------------------------------------------------------------------------
   10. Hero
   --------------------------------------------------------------------------
   Uklad jest dwudzielny, ale nie symetryczny: tekst zajmuje siedem kolumn
   z lewej, gablota ze zdjeciami piec z prawej i wchodzi wyzej niz linia
   naglowka. Naglowek lamie sie z narastajacym wcieciem wierszy. Kazdy
   element ma inny rytm - stad wrazenie rozkladowki magazynu, a nie slajdu.
   -------------------------------------------------------------------------- */
.lf-hero {
	position: relative;
	/* Ziarno na wierzchu sekcji miesza sie z tlem (mix-blend-mode), wiec
	   sekcja musi byc wlasnym kontekstem - inaczej blend siegalby pod nia. */
	isolation: isolate;
	padding-top: clamp(7rem, 12vw, 11rem);
	padding-bottom: var(--lf-section-y);
	background: var(--lf-bg);
	overflow: hidden;
}
.lf-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--lf-gap);
	align-items: start;
}
.lf-hero__head { grid-column: 1 / -1; }
.lf-hero__title {
	margin: 0;
	font-size: var(--lf-fs-h1);
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-wrap: initial;
}
/* Narastajace wciecie kolejnych wierszy naglowka. */
.lf-hero__title .lf-hero__line { display: block; }
.lf-hero__title .lf-hero__line:nth-child(2) { padding-left: 0; }
.lf-hero__title .lf-hero__line:nth-child(3) { padding-left: 0; }
/* Wyroznienie w naglowku. Jeden zapis dla calego serwisu: zamiast kursywy
   lzejsza grubosc i kolor gliny - kursywa w tak duzym stopniu pisma robi sie
   niespokojna, a akcent kolorem czyta sie jako celowy. */
h1 em, h2 em, h3 em, h4 em,
.lf-hero__title em,
.lf-heading-widget__title em,
.lf-statement__text em,
.lf-cta__title em,
.lf-page-head__title em {
	font-style: normal;
	font-weight: 300;
	color: var(--lf-clay);
}
.lf-cta__title em { color: var(--lf-stone); }

.lf-hero__aside { grid-column: 1 / -1; display: grid; gap: 1.75rem; align-content: start; }
.lf-hero__gallery { grid-column: 1 / -1; }
.lf-hero__gallery > [data-lf-shift] { display: block; will-change: transform; }

/* Kreska nad metryka ma zlota koncowke - jeden akcent zamiast calej linii
   w kolorze, ktory na tej dlugosci robilby sie krzykliwy. */
.lf-hero__meta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lf-line);
}
.lf-hero__meta::before {
	content: "";
	position: absolute;
	top: -1px; left: 0;
	width: 56px; height: 1px;
	background: var(--lf-clay);
}
.lf-hero__meta-number {
	font-size: clamp(2.1rem, 3.4vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--lf-heading);
}
.lf-hero__meta-label {
	max-width: 18ch;
	color: var(--lf-muted);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

@media (min-width: 900px) {
	.lf-hero__head { grid-column: 1 / span 7; }
	.lf-hero__title .lf-hero__line:nth-child(2) { padding-left: 8%; }
	.lf-hero__title .lf-hero__line:nth-child(3) { padding-left: 3%; }
	.lf-hero__aside { grid-column: 1 / span 6; padding-top: clamp(0.5rem, 1.6vw, 1.4rem); }
	/* Gablota wchodzi ponad linie naglowka - zlamanie siatki, ktore nadaje
	   kompozycji charakter redakcyjny zamiast podzialu na dwie polowy.
	   Siodma kolumna zostaje pusta: to ona oddziela tekst od zdjec. */
	.lf-hero__gallery {
		grid-column: 8 / -1;
		grid-row: 1 / span 2;
		margin-top: clamp(-5rem, -4vw, -2rem);
	}
}
@media (min-width: 1200px) {
	.lf-hero__aside { grid-column: 1 / span 5; }
}

/* --------------------------------------------------------------------------
   11. Pasek zaufania (logotypy)
   -------------------------------------------------------------------------- */
.lf-logos { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--lf-line-soft); border-bottom: 1px solid var(--lf-line-soft); }
.lf-logos__label {
	margin-bottom: 2rem;
	color: var(--lf-muted);
	font-size: var(--lf-fs-eyebrow);
	letter-spacing: var(--lf-ls-eyebrow);
	text-transform: uppercase;
	text-align: center;
}
.lf-logos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
@media (min-width: 600px) { .lf-logos__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .lf-logos__grid { grid-template-columns: repeat(5, 1fr); } }
.lf-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}
.lf-logos__item img {
	max-height: 34px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(1);
	transition: opacity var(--lf-dur) var(--lf-ease), filter var(--lf-dur) var(--lf-ease);
}
.lf-logos__item:hover img { opacity: 1; filter: grayscale(0); }
/* Logotyp tekstowy, gdy uzytkownik nie wgral grafiki. */
.lf-logos__text {
	color: var(--lf-muted);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.62;
	transition: opacity var(--lf-dur) var(--lf-ease), color var(--lf-dur) var(--lf-ease);
}
.lf-logos__item:hover .lf-logos__text { opacity: 1; color: var(--lf-brown); }

/* --------------------------------------------------------------------------
   12. Deklaracja marki
   -------------------------------------------------------------------------- */
.lf-statement__text {
	max-width: 24ch;
	margin: 0;
	font-size: clamp(1.9rem, 1rem + 3.6vw, 4rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.028em;
	color: var(--lf-heading);
}
.lf-statement__text .lf-hl { color: var(--lf-clay); font-weight: 500; }
.lf-statement__grid { display: grid; gap: var(--lf-gap); }
@media (min-width: 900px) {
	.lf-statement__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
	.lf-statement__text { max-width: 20ch; }
	.lf-statement__side { padding-bottom: 0.5rem; }
}

/* --------------------------------------------------------------------------
   13. Sekcja "O nas"
   --------------------------------------------------------------------------
   Duze zdjecie pionowe, mniejszy detal nachodzacy na nie od dolu i kolumna
   tekstu. Detal ma wlasny, wolniejszy paralaks - stad wrazenie glebi.
   -------------------------------------------------------------------------- */
.lf-about__grid { display: grid; gap: var(--lf-gap); }
@media (min-width: 900px) {
	.lf-about__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
}
.lf-about__media { position: relative; }
.lf-about__detail {
	position: relative;
	width: 58%;
	margin-top: -22%;
	margin-left: auto;
	border: 8px solid var(--lf-bg);
	background: var(--lf-bg);
}
@media (min-width: 900px) {
	.lf-about__detail { width: 52%; margin-top: -26%; margin-left: 0; margin-right: auto; transform: translateX(-12%); }
}
.lf-about__mission {
	margin-top: 2rem;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--lf-line);
}
.lf-about__mission-label {
	margin-bottom: 0.6rem;
	color: var(--lf-clay);
	font-size: var(--lf-fs-eyebrow);
	letter-spacing: var(--lf-ls-eyebrow);
	text-transform: uppercase;
}
.lf-about__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.lf-hero__aside .lf-about__actions { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Przewagi
   -------------------------------------------------------------------------- */
.lf-features__grid { display: grid; gap: 0; }
@media (min-width: 800px) { .lf-features__grid { grid-template-columns: repeat(3, 1fr); } }
.lf-features__grid.lf-cols-2 { grid-template-columns: 1fr; }
@media (min-width: 800px) { .lf-features__grid.lf-cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .lf-features__grid.lf-cols-4 { grid-template-columns: repeat(4, 1fr); } }

.lf-feature {
	position: relative;
	padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
	border-top: 1px solid var(--lf-line);
	transition: background-color var(--lf-dur) var(--lf-ease);
}
@media (min-width: 800px) {
	.lf-feature { border-left: 1px solid var(--lf-line); }
	.lf-feature:first-child { border-left: 0; }
}
.lf-feature:hover { background: rgba(232, 224, 213, 0.6); }
/* Cienka kreska wjezdzajaca od lewej - sygnal najechania bez ruchu ukladu. */
.lf-feature::after {
	content: "";
	position: absolute;
	left: 0; top: -1px;
	width: 100%; height: 1px;
	background: var(--lf-clay);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lf-dur) var(--lf-ease);
}
.lf-feature:hover::after { transform: scaleX(1); }
.lf-feature__num {
	display: block;
	margin-bottom: 1.5rem;
	color: var(--lf-stone);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	transition: color var(--lf-dur) var(--lf-ease);
}
.lf-feature:hover .lf-feature__num { color: var(--lf-clay); }
.lf-feature__icon { margin-bottom: 1.25rem; color: var(--lf-clay); }
.lf-feature__icon svg,
.lf-feature__icon img { width: 32px; height: 32px; }
.lf-feature__title { margin-bottom: 0.75rem; font-size: var(--lf-fs-h4); }
.lf-feature__text { margin: 0; color: var(--lf-fg); font-size: 0.95rem; line-height: 1.7; }

/* --------------------------------------------------------------------------
   15. Oferta - katalog uslug 01 / 02 / 03
   --------------------------------------------------------------------------
   Kazda pozycja to wiersz katalogu, nie kafelek. Zdjecie jest schowane i
   odslania sie przy najechaniu podazajac za kursorem (na urzadzeniach
   dotykowych zostaje statyczna miniatura, bo nie ma czego sledzic).
   -------------------------------------------------------------------------- */
.lf-services { position: relative; }
.lf-services__list { border-top: 1px solid var(--lf-line); }
.lf-service {
	position: relative;
	display: block;
	border-bottom: 1px solid var(--lf-line);
}
.lf-service__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem clamp(1rem, 3vw, 2.5rem);
	align-items: center;
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	transition: padding-left var(--lf-dur) var(--lf-ease), color var(--lf-dur) var(--lf-ease);
}
@media (min-width: 900px) {
	.lf-service__inner { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) auto; }
	.lf-service:hover .lf-service__inner { padding-left: 1.25rem; }
}
.lf-service__num {
	color: var(--lf-stone);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	transition: color var(--lf-dur) var(--lf-ease);
}
.lf-service:hover .lf-service__num { color: var(--lf-clay); }
.lf-service__title {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	transition: color var(--lf-dur) var(--lf-ease);
}
.lf-service:hover .lf-service__title { color: var(--lf-clay); }
.lf-service__cat {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--lf-muted);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.lf-service__text { margin: 0; color: var(--lf-fg); font-size: 0.95rem; line-height: 1.7; max-width: 46ch; }
.lf-service__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	color: var(--lf-heading);
	flex: none;
	transition: background-color var(--lf-dur) var(--lf-ease), color var(--lf-dur) var(--lf-ease),
		border-color var(--lf-dur) var(--lf-ease), transform var(--lf-dur) var(--lf-ease);
}
.lf-service:hover .lf-service__go { background: var(--lf-clay); border-color: var(--lf-clay); color: var(--lf-white); transform: rotate(-45deg); }
.lf-service__go svg { width: 15px; height: 15px; }

.lf-service__thumb { display: none; }

/* Na waskim ekranie lista zamienia sie w karty, wiec miniatura pomaga
   odroznic uslugi. Na szerokim zostaje sam tekst - zdjecia pokazywane pod
   kursorem zaslanialy opisy, klientka poprosila o ich usuniecie. */
@media (max-width: 899px) {
	.lf-service__thumb {
		display: block;
		max-width: 420px;
		margin-top: 1.25rem;
		margin-bottom: 0.5rem;
	}
	.lf-service__thumb .lf-media { --lf-ratio: 4 / 3; }
}

/* Na telefonie miniatura moze zajac cala szerokosc kolumny. */
@media (max-width: 899px) {
	.lf-service__thumb { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   16. Realizacje - siatka asymetryczna
   --------------------------------------------------------------------------
   Kafelki maja rozne wysokosci i przesuniecia, wiec siatka nie czyta sie
   jak tabela. Wzor powtarza sie co cztery pozycje, dzieki czemu dziala dla
   dowolnej liczby realizacji dodanych przez wlasciciela strony.
   -------------------------------------------------------------------------- */
.lf-projects__grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem); }
@media (min-width: 800px) {
	.lf-projects__grid { grid-template-columns: repeat(2, 1fr); }
	/* 1: wyzsze, 2: nizsze i zsuniete w dol, 3: nizsze, 4: wyzsze i zsuniete */
	.lf-project:nth-child(4n + 2) { margin-top: clamp(3rem, 7vw, 7rem); }
	.lf-project:nth-child(4n + 3) { margin-top: clamp(-3rem, -4vw, -1rem); }
	.lf-project:nth-child(4n + 1) .lf-media { --lf-ratio: 4 / 5; }
	.lf-project:nth-child(4n + 2) .lf-media { --lf-ratio: 1 / 1; }
	.lf-project:nth-child(4n + 3) .lf-media { --lf-ratio: 1 / 1; }
	.lf-project:nth-child(4n + 4) .lf-media { --lf-ratio: 4 / 5; }
}
/*
 * Karta jest jasnym passe-partout wokol zdjecia: mleczna plyta z cieniem
 * rzucanym daleko w dol, wlosowa zlota krawedz i dwa narozniki po
 * przekatnej - ten sam motyw co ramka galerii w hero, zeby karta nalezala
 * do tego samego systemu, a nie byla doklejona z innego szablonu.
 */
.lf-project {
	--lf-card-pad: clamp(0.85rem, 1.4vw, 1.2rem);
	position: relative;
	/* Karta ma wysokosc swojej tresci - rozciagnieta do wysokosci rzedu
	   zostawiala pusta plyte pod krotszym opisem. */
	align-self: start;
	display: flex;
	flex-direction: column;
	padding: var(--lf-card-pad) var(--lf-card-pad) clamp(1.4rem, 2.4vw, 2.1rem);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(232, 224, 213, 0.5) 100%);
	border: 1px solid rgba(164, 138, 88, 0.2);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(23, 18, 16, 0.04),
		0 34px 64px -44px rgba(23, 18, 16, 0.42);
	/* translate zamiast transform: transform nalezy do animacji wejscia
	   i uniesienie przy najechaniu nadpisywaloby ja w polowie ruchu. */
	transition:
		translate 0.6s var(--lf-ease),
		box-shadow 0.6s var(--lf-ease),
		border-color 0.6s var(--lf-ease);
}
.lf-project:hover,
.lf-project:focus-visible {
	translate: 0 -6px;
	border-color: rgba(164, 138, 88, 0.42);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 4px rgba(23, 18, 16, 0.05),
		0 48px 80px -46px rgba(23, 18, 16, 0.55);
}
.lf-project:focus-visible { outline: 1px solid var(--lf-clay); outline-offset: 4px; }
.lf-project .lf-media { --lf-ratio: 4 / 5; }

/* Zdjecie w ramce: wewnetrzna, jasna linia odcina je od karty jak
   wyciecie w passe-partout. Linia lezy nad kurtyna maski (z-index 4). */
.lf-project__frame { display: block; }
.lf-project__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
	pointer-events: none;
}
/* Kurtyna odslaniajaca ma kolor karty, nie tla strony - inaczej przez
   chwile widac kremowy prostokat odcinajacy sie od mlecznej plyty. */
.lf-project__frame[data-lf-mask]::after { background: #f7f4ef; }

.lf-project__corners {
	position: absolute;
	inset: -0.55rem;
	z-index: 5;
	pointer-events: none;
}
.lf-project__corners::before,
.lf-project__corners::after {
	content: "";
	position: absolute;
	width: 22px; height: 22px;
	border: 1px solid var(--lf-clay);
	opacity: 0.55;
	transition: width 0.55s var(--lf-ease), height 0.55s var(--lf-ease), opacity 0.55s var(--lf-ease);
}
.lf-project__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lf-project__corners::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.lf-project:hover .lf-project__corners::before,
.lf-project:hover .lf-project__corners::after,
.lf-project:focus-visible .lf-project__corners::before,
.lf-project:focus-visible .lf-project__corners::after { width: 44px; height: 44px; opacity: 1; }

/* Ciemna zaslona pojawia sie od dolu tylko przy najechaniu. */
.lf-project__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(23, 18, 16, 0.55) 0%, rgba(23, 18, 16, 0.1) 45%, transparent 75%);
	opacity: 0;
	transition: opacity var(--lf-dur) var(--lf-ease);
}
.lf-project:hover .lf-project__overlay,
.lf-project:focus-visible .lf-project__overlay { opacity: 1; }

.lf-project__badge {
	position: absolute;
	right: 1.1rem; bottom: 1.1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--lf-cream);
	color: var(--lf-ink);
	opacity: 0;
	transform: translateY(12px) scale(0.85);
	transition: opacity var(--lf-dur) var(--lf-ease), transform var(--lf-dur) var(--lf-ease);
}
.lf-project:hover .lf-project__badge,
.lf-project:focus-visible .lf-project__badge { opacity: 1; transform: translateY(0) scale(1); }
.lf-project__badge svg { width: 16px; height: 16px; }

/* Numer, kreska i kategoria - wiersz nad tytulem jak w katalogu wzorow. */
.lf-project__meta {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: clamp(1.2rem, 2vw, 1.6rem) clamp(0.2rem, 0.8vw, 0.6rem) 0;
	color: var(--lf-clay);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
}
.lf-project__nr { font-variant-numeric: tabular-nums; }
.lf-project__rule {
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	transform-origin: left;
	transition: width 0.6s var(--lf-ease), opacity 0.6s var(--lf-ease);
}
.lf-project:hover .lf-project__rule { width: 64px; opacity: 1; }
.lf-project__cat { color: var(--lf-muted); letter-spacing: 0.14em; }

.lf-project__title {
	margin: 0.85rem 0 0;
	padding-inline: clamp(0.2rem, 0.8vw, 0.6rem);
	font-size: var(--lf-fs-h3);
	letter-spacing: -0.02em;
	line-height: 1.15;
	transition: color var(--lf-dur) var(--lf-ease);
}
.lf-project:hover .lf-project__title { color: var(--lf-clay); }
.lf-project__excerpt {
	margin: 0.65rem 0 0;
	padding-inline: clamp(0.2rem, 0.8vw, 0.6rem);
	color: var(--lf-text);
	font-size: 0.93rem;
	line-height: 1.65;
	max-width: 48ch;
}

.lf-projects__more { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   17. Film w sekcji
   --------------------------------------------------------------------------
   Kadr ma stale proporcje (zmienna z widgetu), wiec zanim film sie zaladuje,
   miejsce jest juz zarezerwowane - strona nie skacze. Plakat wypelnia kadr
   tak samo jak film (object-fit), wiec zamiana jednego na drugie jest
   niewidoczna.
   -------------------------------------------------------------------------- */
.lf-video { position: relative; overflow: hidden; background: var(--lf-dark); }
.lf-video--boxed { max-width: var(--lf-container); margin-inline: auto; }
/* Film pionowy: waski kadr na srodku, nie wyzszy niz ekran. */
.lf-video--narrow { width: min(100%, 440px, calc(80vh * 9 / 16)); margin-inline: auto; box-shadow: var(--lf-shadow); }
.lf-video__player,
.lf-video__poster {
	display: block;
	width: 100%;
	aspect-ratio: var(--lf-video-ratio, 16 / 9);
	max-height: 88vh;
	object-fit: cover;
}
/* Telefon: pelny kadr 16:9 bylby paskiem wysokosci kciuka - podnosimy go. */
@media (max-width: 767px) {
	.lf-video--full .lf-video__player,
	.lf-video--full .lf-video__poster { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   19. Opinie
   --------------------------------------------------------------------------
   Slider oparty na natywnym przewijaniu z zatrzaskiem (scroll-snap):
   dziala gestem na telefonie, kolkiem na laptopie i strzalkami z klawiatury,
   a nie wymaga zadnej biblioteki.
   -------------------------------------------------------------------------- */
.lf-testimonials { background: var(--lf-bg-alt); }
.lf-testimonials__head { display: grid; gap: var(--lf-gap); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .lf-testimonials__head { grid-template-columns: minmax(0, 1fr) auto; } }

.lf-testimonials__viewport {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Margines ujemny + padding: karty moga dotykac krawedzi ekranu,
	   ale pierwsza i ostatnia zatrzymuja sie w linii kontenera. */
	margin-inline: calc(var(--lf-gutter) * -1);
	padding-inline: var(--lf-gutter);
	padding-bottom: 0.5rem;
}
.lf-testimonials__viewport::-webkit-scrollbar { display: none; }

.lf-testimonial {
	flex: 0 0 auto;
	width: min(100%, 560px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: var(--lf-bg);
	border: 1px solid var(--lf-line-soft);
}
@media (min-width: 1100px) { .lf-testimonial { width: 620px; } }
.lf-testimonial__stars { display: flex; gap: 0.25rem; color: var(--lf-clay); }
.lf-testimonial__stars svg { width: 15px; height: 15px; }
.lf-testimonial__quote {
	margin: 0;
	font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.5rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--lf-heading);
}
.lf-testimonial__foot { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--lf-line-soft); }
.lf-testimonial__avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lf-stone);
	color: var(--lf-brown);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.lf-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lf-testimonial__name { display: block; color: var(--lf-heading); font-weight: 500; }
.lf-testimonial__role { display: block; color: var(--lf-muted); font-size: 0.82rem; }
.lf-testimonial__year { margin-left: auto; color: var(--lf-muted); font-size: 0.78rem; letter-spacing: 0.1em; }

.lf-slider__nav { display: flex; gap: 0.6rem; }
.lf-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	background: none;
	color: var(--lf-heading);
	cursor: pointer;
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease),
		border-color var(--lf-dur-fast) var(--lf-ease), opacity var(--lf-dur-fast) var(--lf-ease);
}
.lf-slider__btn:hover:not(:disabled) { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); }
.lf-slider__btn:disabled { opacity: 0.32; cursor: default; }
.lf-slider__btn svg { width: 16px; height: 16px; }

.lf-stat { display: flex; align-items: baseline; gap: 0.9rem; }
.lf-stat__value { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lf-heading); }
.lf-stat__label { max-width: 16ch; color: var(--lf-muted); font-size: 0.8rem; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   20. FAQ
   --------------------------------------------------------------------------
   Rozwijanie przez grid-template-rows 0fr -> 1fr. Bez mierzenia wysokosci
   w JavaScripcie, wiec animacja jest plynna niezaleznie od dlugosci odpowiedzi.
   -------------------------------------------------------------------------- */
.lf-faq__grid { display: grid; gap: var(--lf-gap); }
@media (min-width: 950px) { .lf-faq__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } }
.lf-faq__list { border-top: 1px solid var(--lf-line); }
.lf-faq__item { border-bottom: 1px solid var(--lf-line); }
.lf-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: clamp(1.15rem, 2.2vw, 1.65rem) 0;
	border: 0;
	background: none;
	color: var(--lf-heading);
	font-family: inherit;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: left;
	cursor: pointer;
	transition: color var(--lf-dur-fast) var(--lf-ease);
}
.lf-faq__question:hover { color: var(--lf-clay); }
.lf-faq__icon {
	position: relative;
	flex: none;
	width: 22px; height: 22px;
	margin-top: 0.15rem;
}
.lf-faq__icon::before,
.lf-faq__icon::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--lf-dur) var(--lf-ease), opacity var(--lf-dur) var(--lf-ease);
}
.lf-faq__icon::before { width: 14px; height: 1.5px; }
.lf-faq__icon::after { width: 1.5px; height: 14px; }
.lf-faq__item.is-open .lf-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.lf-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lf-dur) var(--lf-ease);
}
.lf-faq__item.is-open .lf-faq__answer { grid-template-rows: 1fr; }
.lf-faq__answer > div { overflow: hidden; }
.lf-faq__answer p {
	margin: 0;
	padding-bottom: clamp(1.15rem, 2.2vw, 1.65rem);
	padding-right: clamp(0px, 4vw, 3rem);
	max-width: 78ch;
	color: var(--lf-text);
	font-size: 0.98rem;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   21. Blog
   -------------------------------------------------------------------------- */
.lf-posts__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 700px) { .lf-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lf-posts__grid.lf-cols-3 { grid-template-columns: repeat(3, 1fr); } }
.lf-post-card { display: flex; flex-direction: column; }
.lf-post-card .lf-media { --lf-ratio: 4 / 3; margin-bottom: 1.5rem; }
.lf-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.85rem;
	color: var(--lf-muted);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.lf-post-card__meta span + span::before { content: "—"; margin-right: 0.6rem; opacity: 0.6; }
.lf-post-card__title {
	margin: 0 0 0.85rem;
	font-size: var(--lf-fs-h3);
	line-height: 1.25;
	letter-spacing: -0.018em;
	transition: color var(--lf-dur) var(--lf-ease);
}
.lf-post-card:hover .lf-post-card__title { color: var(--lf-clay); }
.lf-post-card__excerpt { margin: 0 0 1.5rem; color: var(--lf-text); font-size: 0.95rem; line-height: 1.7; }
.lf-post-card__more { margin-top: auto; }

/* --------------------------------------------------------------------------
   22. Wezwanie do kontaktu
   -------------------------------------------------------------------------- */
.lf-cta { position: relative; background: var(--lf-ink); color: rgba(243, 239, 233, 0.75); overflow: hidden; }
.lf-cta__bg { position: absolute; inset: 0; opacity: 0.22; }
.lf-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.lf-cta__inner { position: relative; display: grid; gap: var(--lf-gap); align-items: end; }
@media (min-width: 900px) { .lf-cta__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.lf-cta__title { margin: 0; color: var(--lf-cream); font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 19ch; padding-bottom: 0.08em; }
.lf-cta__text { margin: 1.5rem 0 0; max-width: 44ch; }
.lf-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.lf-cta__direct { margin-top: 2rem; display: grid; gap: 0.5rem; }
.lf-cta__direct a { color: var(--lf-cream); font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem); letter-spacing: -0.01em; transition: color var(--lf-dur-fast) var(--lf-ease); }
.lf-cta__direct a:hover { color: var(--lf-clay); }

/* --------------------------------------------------------------------------
   23. Stopka
   -------------------------------------------------------------------------- */
.lf-footer { background: var(--lf-bg-alt); color: var(--lf-text); }
.lf-footer__main { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.lf-footer__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 700px) { .lf-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .lf-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); } }

.lf-footer__brand { max-width: 34ch; }
.lf-footer__logo { display: inline-flex; margin-bottom: 1.5rem; color: var(--lf-ink); }
.lf-footer__logo img { height: clamp(56px, 5vw, 74px); width: auto; }
.lf-footer__desc { margin: 0 0 1.75rem; color: var(--lf-text); font-size: 0.95rem; line-height: 1.75; }

.lf-footer__col-title {
	margin: 0 0 1.35rem;
	color: var(--lf-ink);
	font-size: var(--lf-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--lf-ls-eyebrow);
	text-transform: uppercase;
}
.lf-footer ul { margin: 0; padding: 0; list-style: none; }
.lf-footer li { margin: 0 0 0.7rem; }
.lf-footer__col a,
.lf-footer__contact a {
	position: relative;
	display: inline-block;
	color: var(--lf-text);
	font-size: 0.95rem;
	transition: color var(--lf-dur-fast) var(--lf-ease);
}
.lf-footer__col a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lf-dur) var(--lf-ease);
}
.lf-footer__col a:hover { color: var(--lf-ink); }
.lf-footer__col a:hover::after { transform: scaleX(1); }
.lf-footer__contact { display: grid; gap: 0.7rem; font-size: 0.95rem; font-style: normal; }
.lf-footer__contact a:hover { color: var(--lf-clay); }
.lf-footer__contact strong { display: block; color: var(--lf-ink); font-weight: 500; }

.lf-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	color: var(--lf-brown);
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease),
		border-color var(--lf-dur-fast) var(--lf-ease), transform var(--lf-dur-fast) var(--lf-ease);
}
.lf-social a:hover { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); transform: translateY(-2px); }
.lf-social svg { width: 16px; height: 16px; }

.lf-newsletter { display: flex; gap: 0.5rem; margin-top: 1rem; }
.lf-newsletter input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--lf-line);
	background: var(--lf-bg);
	color: var(--lf-ink);
	font-family: inherit;
	font-size: 0.9rem;
}
.lf-newsletter input::placeholder { color: var(--lf-muted); }
.lf-newsletter button { flex: none; padding-inline: 1.25rem; }

/* Duzy znak slowny na dole stopki - domkniecie kompozycji strony. */
.lf-footer__wordmark {
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--lf-line);
	color: var(--lf-stone);
	font-size: clamp(2.6rem, 11vw, 9rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	text-align: center;
	user-select: none;
}
.lf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--lf-line);
	color: var(--lf-muted);
	font-size: 0.82rem;
}
.lf-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.lf-footer__bottom li { margin: 0; }
.lf-footer__bottom a:hover { color: var(--lf-ink); }

/* --------------------------------------------------------------------------
   24. Naglowek podstrony
   -------------------------------------------------------------------------- */
.lf-page-head {
	position: relative;
	padding-top: clamp(9rem, 14vw, 14rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	background: var(--lf-bg-alt);
	overflow: hidden;
}
.lf-page-head--media { background: var(--lf-ink); }
.lf-page-head__bg { position: absolute; inset: 0; opacity: 0.45; }
.lf-page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.lf-page-head--media .lf-page-head__title,
.lf-page-head--media .lf-breadcrumbs,
.lf-page-head--media .lf-page-head__text { color: var(--lf-cream); }
.lf-page-head__inner { position: relative; }
.lf-page-head__title { margin: 0; max-width: 20ch; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem); line-height: 1.03; letter-spacing: -0.032em; }
.lf-page-head__text { max-width: 52ch; margin: 1.5rem 0 0; font-size: var(--lf-fs-lead); line-height: 1.6; }

.lf-breadcrumbs { margin-bottom: 1.5rem; color: var(--lf-muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lf-breadcrumbs a { color: inherit; transition: color var(--lf-dur-fast) var(--lf-ease); }
.lf-breadcrumbs a:hover { color: var(--lf-clay); }
.lf-breadcrumbs span + span::before { content: "/"; margin-inline: 0.5rem; opacity: 0.5; }

/* --------------------------------------------------------------------------
   25. Tresc wpisu i strony
   -------------------------------------------------------------------------- */
.lf-entry { --lf-ratio: 16 / 9; }
.lf-entry__content > * { max-width: var(--lf-container-narrow); margin-inline: auto; }
.lf-entry__content > .alignwide { max-width: 1100px; }
.lf-entry__content > .alignfull { max-width: none; }
.lf-entry__content h2 { margin-top: 2.5em; }
.lf-entry__content h3 { margin-top: 2em; }
.lf-entry__content img { border-radius: var(--lf-radius); }
.lf-entry__content figure { margin: 2.5rem auto; }
.lf-entry__content figcaption { margin-top: 0.75rem; color: var(--lf-muted); font-size: 0.82rem; text-align: center; }
.lf-entry__content a:not(.lf-btn):not(.lf-link) {
	color: var(--lf-clay);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color var(--lf-dur-fast) var(--lf-ease);
}
.lf-entry__content a:not(.lf-btn):not(.lf-link):hover { color: var(--lf-clay-dark); }

.lf-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	color: var(--lf-muted);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.lf-entry__meta span + span::before { content: "—"; margin-right: 0.75rem; opacity: 0.6; }

.lf-entry__footer { max-width: var(--lf-container-narrow); margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--lf-line); }
.lf-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lf-tags a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--lf-line);
	border-radius: 999px;
	color: var(--lf-text);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease), border-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-tags a:hover { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); }

/* Nawigacja miedzy wpisami */
.lf-post-nav { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--lf-line); }
@media (min-width: 700px) { .lf-post-nav { grid-template-columns: repeat(2, 1fr); } }
.lf-post-nav__item { display: block; }
.lf-post-nav__item--next { text-align: right; }
.lf-post-nav__label { display: block; margin-bottom: 0.5rem; color: var(--lf-muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.lf-post-nav__title { margin: 0; font-size: var(--lf-fs-h4); transition: color var(--lf-dur-fast) var(--lf-ease); }
.lf-post-nav__item:hover .lf-post-nav__title { color: var(--lf-clay); }

/* Specyfikacja realizacji */
.lf-specs { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--lf-line); }
.lf-specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--lf-line); }
.lf-specs__key { margin: 0; color: var(--lf-muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lf-specs__val { margin: 0; color: var(--lf-heading); font-weight: 500; }

.lf-gallery { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 700px) { .lf-gallery { grid-template-columns: repeat(2, 1fr); } }
.lf-gallery__item:first-child { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   26. Paginacja, komentarze, formularze
   -------------------------------------------------------------------------- */
.lf-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.lf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px; height: 48px;
	padding-inline: 0.75rem;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	color: var(--lf-text);
	font-size: 0.85rem;
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease), border-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-pagination .page-numbers:hover,
.lf-pagination .page-numbers.current { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); }
.lf-pagination .dots { border-color: transparent; }

.lf-comments { max-width: var(--lf-container-narrow); margin: clamp(3rem, 6vw, 5rem) auto 0; }
.lf-comments__title { margin-bottom: 2rem; font-size: var(--lf-fs-h3); }
.lf-comments ol { margin: 0; padding: 0; list-style: none; }
.lf-comments .children { margin-left: clamp(1rem, 4vw, 3rem); padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 1px solid var(--lf-line); }
.lf-comments li { margin-bottom: 2rem; }
.lf-comment__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.85rem; }
.lf-comment__head img { border-radius: 50%; }
.lf-comment__author { color: var(--lf-heading); font-weight: 500; }
.lf-comment__date { color: var(--lf-muted); font-size: 0.78rem; }

input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--lf-line);
	border-radius: var(--lf-radius);
	background: var(--lf-white);
	color: var(--lf-ink);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color var(--lf-dur-fast) var(--lf-ease), box-shadow var(--lf-dur-fast) var(--lf-ease);
	/* 16px minimum na telefonie, inaczej iOS przybliza formularz. */
}
@media (max-width: 767px) {
	input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
	input[type="search"], input[type="password"], input[type="number"], select, textarea { font-size: 16px; }
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lf-clay); box-shadow: 0 0 0 3px rgba(169, 113, 79, 0.14); }
textarea { min-height: 160px; resize: vertical; }
label { display: block; margin-bottom: 0.5rem; color: var(--lf-heading); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; }
input[type="submit"], button[type="submit"] { width: auto; }

.lf-form__row { margin-bottom: 1.25rem; }
.lf-form__grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .lf-form__grid { grid-template-columns: repeat(2, 1fr); } }
.lf-form__note { margin-top: 1rem; color: var(--lf-muted); font-size: 0.8rem; line-height: 1.6; }

.lf-search-form { display: flex; gap: 0.5rem; max-width: 520px; }
.lf-search-form input { flex: 1; }

/* --------------------------------------------------------------------------
   27. Strona 404 i brak wynikow
   -------------------------------------------------------------------------- */
.lf-404 { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.lf-404__code {
	font-size: clamp(5rem, 20vw, 14rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--lf-stone);
}
.lf-404__title { margin-top: 1rem; }
.lf-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.lf-empty { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; color: var(--lf-muted); }

/* --------------------------------------------------------------------------
   28. Klasy WordPressa
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0.5rem 2rem 1.5rem 0; }
.alignright { float: right; margin: 0.5rem 0 1.5rem 2rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: 0.6rem; color: var(--lf-muted); font-size: 0.82rem; text-align: center; }
.sticky .lf-post-card__title::after { content: " ●"; color: var(--lf-clay); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.lf-clearfix::after { content: ""; display: table; clear: both; }

/* Pasek administratora nie moze zaslaniac przyklejonego naglowka. */
.admin-bar .lf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .lf-header { top: 46px; } }
.admin-bar .lf-drawer { top: 32px; }
@media (max-width: 782px) { .admin-bar .lf-drawer { top: 46px; } }

/* --------------------------------------------------------------------------
   29. Wspolpraca z Elementorem
   --------------------------------------------------------------------------
   Elementor renderuje wlasne kontenery. Motyw nie narzuca im nic poza
   szerokoscia domyslna i przywroceniem obrazow do bloku - reszta zostaje
   w rekach uzytkownika w panelu edycji.
   -------------------------------------------------------------------------- */
.elementor-widget-image img { border-radius: var(--lf-radius); }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--lf-container); }

/* Widoczna ramka pustej sekcji tylko w edytorze - uzytkownik od razu widzi,
   gdzie ma wstawic tresc, a odwiedzajacy nigdy tego nie zobaczy. */
.elementor-editor-active .lf-empty-hint {
	display: block;
	padding: 2rem;
	border: 1px dashed var(--lf-clay);
	color: var(--lf-clay);
	text-align: center;
	font-size: 0.85rem;
}
.lf-empty-hint { display: none; }

/* --------------------------------------------------------------------------
   30. Dopracowanie wersji mobilnej
   --------------------------------------------------------------------------
   Nie chodzi o ustawienie kolumn jedna pod druga - to robi siatka sama.
   Ponizej sa poprawki, ktorych automat nie zrobi: kadrowanie zdjec, rytm
   odstepow, rozmiary dotykowe i kolejnosc czytania.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.lf-about__media .lf-media { --lf-ratio: 4 / 5; }

	/* Kolejnosc czytania w hero: etykieta, naglowek, zdjecia, tekst, przycisk. */
	.lf-hero__grid { display: flex; flex-direction: column; }
	.lf-hero__head { order: 1; }
	.lf-hero__gallery { order: 2; }
	.lf-hero__aside { order: 3; }

	/*
	 * Usluga na telefonie to jedna kolumna. Wersja dwukolumnowa wpychala opis
	 * pod numer, a strzalke obok niego - siatka rozjezdzala sie, bo czwarty
	 * element nie miesci sie w dwoch kolumnach.
	 */
	.lf-service__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.7rem;
		align-items: start;
	}
	.lf-service__num { padding-top: 0; }
	.lf-service__text { max-width: none; }
	.lf-service__go { justify-self: start; margin-top: 0.4rem; }

	/* Przesuniecia siatki realizacji nie maja sensu w jednej kolumnie. */
	.lf-project { margin-top: 0 !important; }

	.lf-testimonial { width: min(88vw, 460px); }
	.lf-footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 600px) {
	.lf-section-head { margin-bottom: 2.25rem; }
	.lf-hero__meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
	.lf-hero__meta-label { max-width: none; }
	.lf-about__detail { width: 64%; margin-top: -18%; }
}

/* Laptopy 13" - kontener zostaje szeroki, ale odstepy sie skracaja,
   zeby sekcja miescila sie w jednym ekranie tak jak na duzym monitorze. */
@media (min-width: 1025px) and (max-width: 1440px) {
	:root { --lf-section-y: clamp(4rem, 6.5vw, 7rem); }
}

/* Ekrany bardzo szerokie - tresc nie moze rozjechac sie na cala szerokosc. */
@media (min-width: 1800px) {
	:root { --lf-container: 1440px; }
}

/* Wydruk: bez ozdob, sama tresc. */
@media print {
	.lf-header, .lf-drawer, .lf-footer, .lf-video, .lf-cta { display: none !important; }
	body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   31. Formularz kontaktowy
   -------------------------------------------------------------------------- */
.lf-form { max-width: 880px; }

.lf-form__msg {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 2px solid;
	font-size: 0.95rem;
}
.lf-form__msg--ok { border-color: var(--lf-clay); background: rgba(126, 100, 55, 0.09); color: var(--lf-brown); }
.lf-form__msg--err { border-color: #9b3b2f; background: rgba(155, 59, 47, 0.07); color: #7d2f25; }

.lf-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}
.lf-form__consent input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--lf-clay);
}
.lf-form__consent label {
	margin: 0;
	color: var(--lf-text);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   32. Naglowek i stopka zbudowane w Elementorze
   --------------------------------------------------------------------------
   Elementor opakowuje kazdy widget wlasnym kontenerem. Ponizsze reguly
   sprawiaja, ze zbudowany wizualnie naglowek zachowuje sie tak samo jak
   wbudowany: nawigacja stoi obok przycisku, a nie pod nim.
   -------------------------------------------------------------------------- */
.lf-nav-wrap { display: flex; align-items: center; gap: 1rem; }

.lf-header .elementor-element,
.lf-header .e-con,
.lf-header .e-con-inner { --e-con-grid-template-columns: none; }

/* Kontener naglowka: pelna wysokosc paska i brak dolnego marginesu widgetow. */
.lf-header > .elementor { width: 100%; }
.lf-header .elementor-widget:not(:last-child) { margin-block-end: 0; }

.lf-footer .elementor-widget:not(:last-child) { margin-block-end: 0; }
.lf-footer .lf-footer__col-title { margin-top: 0; }

/* --------------------------------------------------------------------------
   33. Kadrowanie odporne na reguly wtyczek
   --------------------------------------------------------------------------
   Elementor (i czesc wtyczek galerii) ustawia img { height: auto }. Nasza
   regula ma taka sama moc selektora, wiec zalezalaby od kolejnosci arkuszy.
   Podwojona klasa podnosi moc o jeden stopien i domyka sprawe niezaleznie
   od tego, co jeszcze zostanie dolaczone do strony.
   -------------------------------------------------------------------------- */
.lf-media.lf-media img,
.lf-media.lf-media > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   34. Rozmiar bazowy ikon
   --------------------------------------------------------------------------
   Ikony sa wstawiane jako SVG bez atrybutow width i height, zeby dziedziczyly
   rozmiar tekstu. Bez tej reguly przegladarka rozciaga je do szerokosci
   rodzica - wystarczy jedno miejsce bez wlasnego rozmiaru, zeby ikona urosla
   na pol ekranu.
   -------------------------------------------------------------------------- */
.lf-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

.lf-contact__icon {
	width: 17px;
	height: 17px;
	margin-top: 0.3rem;
	color: var(--lf-clay);
}

.lf-pagination .page-numbers .lf-icon { width: 15px; height: 15px; }
.lf-search-form .lf-icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   35. Hero na ciemnym tle
   --------------------------------------------------------------------------
   Przelaczenie odbywa sie na poziomie zmiennych, nie pojedynczych regul.
   Dzieki temu wszystko wewnatrz sekcji - kurtyna odslaniajaca zdjecia,
   tlo kadru, linie, etykiety - przejmuje ciemna wersje samo, bez listy
   wyjatkow, ktora trzeba by uzupelniac przy kazdym nowym elemencie.
   -------------------------------------------------------------------------- */
.lf-hero--dark {
	--lf-bg: var(--lf-ink);
	--lf-fg: rgba(243, 239, 233, 0.84);
	--lf-heading: var(--lf-cream);
	/* Na tuszu glebsze zloto dawaloby 3,3:1 - za malo dla etykiety zlozonej
	   malym stopniem pisma. Jasny ton z logo daje 9,6:1. */
	--lf-clay: var(--lf-gold-light);
	--lf-line: rgba(243, 239, 233, 0.17);
	--lf-line-soft: rgba(243, 239, 233, 0.09);
	--lf-muted: #a09589;
	--lf-stone: #2a2320;
	--lf-hero-side: rgba(23, 18, 16, 0.78);
	--lf-hero-vignette: rgba(0, 0, 0, 0.46);

	background: var(--lf-ink);
	color: var(--lf-fg);
}

/* Przyciski: ciemny na ciemnym bylby niewidoczny, wiec role sie odwracaja. */
.lf-hero--dark .lf-btn {
	--btn-bg: var(--lf-cream);
	--btn-fg: var(--lf-ink);
}
.lf-hero--dark .lf-btn:hover,
.lf-hero--dark .lf-btn:focus-visible { color: var(--lf-ink); }

.lf-hero--dark .lf-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--lf-cream);
	border-color: rgba(243, 239, 233, 0.45);
}

.lf-hero--dark .lf-hgal__badge {
	background: rgba(23, 18, 16, 0.74);
	border-color: rgba(243, 239, 233, 0.28);
}

/*
 * Naglowek strony nad ciemnym hero.
 *
 * Zamiast przekazywac informacje o kolorze sekcji przez PHP, pytamy o nia
 * samym arkuszem: jesli gdziekolwiek na stronie jest ciemne hero, naglowek
 * w stanie poczatkowym rozjasnia sie. Dzieki temu dziala tak samo na stronie
 * glownej i na kazdej podstronie, w ktorej uzytkownik wstawi ten widget.
 */
body:has(.lf-hero--dark) .lf-header:not(.is-stuck) { color: var(--lf-cream); }
body:has(.lf-hero--dark) .lf-header.is-stuck { color: var(--lf-ink); }

body:has(.lf-hero--dark) .lf-header:not(.is-stuck) .lf-btn,
.lf-header--over-media:not(.is-stuck) .lf-btn {
	--btn-bg: transparent;
	--btn-fg: var(--lf-cream);
	border-color: rgba(243, 239, 233, 0.45);
}

/* --------------------------------------------------------------------------
   36. Akcent na ciemnych powierzchniach
   --------------------------------------------------------------------------
   Wszedzie tam, gdzie tlem jest tusz albo przyciemnione zdjecie, akcent
   przechodzi na jasny ton zlota z logo. Bez tego etykiety sekcji mialyby na
   ciemnym tle 3,3:1 - ponizej progu czytelnosci dla drobnego tekstu.
   -------------------------------------------------------------------------- */
.lf-cta,
.lf-section--dark,
.lf-page-head--media {
	--lf-clay: var(--lf-gold-light);
	--lf-heading: var(--lf-cream);
	--lf-line: rgba(243, 239, 233, 0.18);
	--lf-muted: #a09589;
}

.lf-section--dark .lf-eyebrow { color: var(--lf-gold-light); }

/* Logo wgrane przez klienta jest zlote na przezroczystym tle - dziala i na
   kredzie, i na tuszu, wiec nie odwracamy go w zadnym z tych miejsc. */
.lf-logo__img { max-width: 100%; }

/* --------------------------------------------------------------------------
   37. Zdjęcie w tle sekcji otwierającej
   --------------------------------------------------------------------------
   Zaslona bierze kolor z --lf-bg, wiec przy ciemnym hero jest w kolorze tuszu,
   a przy jasnym w kolorze kredy - jedna regula obsluguje oba warianty.
   Gradient na dole wtapia zdjecie w tlo sekcji, zeby przejscie do paska
   logotypow nie bylo ostrym cieciem.
   -------------------------------------------------------------------------- */
.lf-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.lf-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.lf-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--lf-bg);
	opacity: 0.72;
}

/*
 * Druga warstwa zaslony, kierunkowa. Sama rownomierna zaslona wystarcza
 * naglowkowi, ale nie akapitowi zlozonemu mniejszym stopniem pisma - ten
 * potrzebuje ciemniejszego tla dokladnie tam, gdzie stoi. Gradient przyciemnia
 * lewa kolumne z tekstem i wypuszcza zdjecie po prawej, gdzie sa kadry.
 */
.lf-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 88% at 50% 34%, transparent 36%, var(--lf-hero-vignette) 100%),
		linear-gradient(to right, var(--lf-hero-side) 0%, transparent 60%),
		linear-gradient(to bottom, transparent 55%, var(--lf-bg) 100%);
}

/* Na waskim ekranie tekst zajmuje cala szerokosc, wiec gradient boczny nie ma
   sensu - jego role przejmuje mocniejsza zaslona ustawiona w widgecie. */
@media (max-width: 899px) {
	.lf-hero__bg::after {
		background:
			radial-gradient(130% 80% at 50% 32%, transparent 40%, var(--lf-hero-vignette) 100%),
			linear-gradient(to bottom, transparent 60%, var(--lf-bg) 100%);
	}
}

/* Tresc musi znalezc sie nad zaslona - bez tego naglowek chowa sie pod nia. */
.lf-hero > .lf-container { position: relative; z-index: 1; }

/*
 * Przy zdjeciu w tle gablota potrzebuje wlasnej krawedzi - inaczej jasna
 * fotografia w kadrze zlewa sie z rozjasnionym tlem sekcji.
 */
.lf-hero__bg ~ .lf-container .lf-hgal__stack {
	box-shadow: 0 40px 80px -38px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   38. Sekcja otwierająca: głębia, akcenty i wskaźnik przewijania
   --------------------------------------------------------------------------
   Warstwy poruszają się z różną prędkością i w dwie strony: tło wolniej i
   w dół, zdjęcie pionowe pod prąd, poziome szybciej. Rozbieżność jest
   celowa - jednakowe tempo dałoby wrażenie jednego, sztywnego obrazka.
   -------------------------------------------------------------------------- */

/* Warstwa przesuwana ma zapas wysokości, żeby paralaks nie odsłonił krawędzi. */
.lf-hero__bg-shift {
	position: absolute;
	left: 0;
	right: 0;
	top: -7%;
	height: 114%;
	will-change: transform;
}
.lf-hero__bg-shift img { width: 100%; height: 100%; object-fit: cover; }

/* Powolne oddalenie przy wejściu. Osobna warstwa od paralaksu, więc obie
   animacje pisza po transformach różnych elementów i nie kasują się. */
.lf-hero__bg--zoom img { animation: lf-hero-zoom 2.4s var(--lf-ease) both; }
@keyframes lf-hero-zoom {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

/* Gablota ze zdjęciami ma własną sekcję (39) - tam siedzi cały jej wygląd. */

/* --- Znak dekoracyjny ------------------------------------------------- */
.lf-hero__mark {
	position: absolute;
	bottom: -6%;
	width: clamp(320px, 46vw, 780px);
	z-index: 0;
	pointer-events: none;
	opacity: 0.07;
}
.lf-hero__mark img { width: 100%; height: auto; will-change: transform; }
.lf-hero__mark--right { right: -4%; }
.lf-hero__mark--left { left: -6%; }
.lf-hero__mark--center { left: 50%; transform: translateX(-50%); }

@media (max-width: 899px) {
	/* Na wąskim ekranie znak wchodziłby pod tekst - zmniejszamy go i chowamy
	   przy dolnej krawędzi, gdzie nic nie zasłania. */
	.lf-hero__mark { width: 62vw; bottom: 2%; opacity: 0.05; }
}

/* --- Cienkie linie prowadzące ----------------------------------------- */
.lf-hero__lines {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Dwie pionowe włoskowe linie w miejscach podziału siatki. Rysowane
	   gradientem, żeby wygasały u góry i u dołu zamiast ciąć sekcję. */
	background-image:
		linear-gradient(to bottom, transparent, var(--lf-line) 22%, var(--lf-line) 78%, transparent),
		linear-gradient(to bottom, transparent, var(--lf-line) 30%, var(--lf-line) 70%, transparent);
	background-size: 1px 100%, 1px 100%;
	background-position: 33.33% 0, 66.66% 0;
	background-repeat: no-repeat;
	opacity: 0.9;
}
@media (max-width: 899px) { .lf-hero__lines { display: none; } }

/* --- Wskaźnik przewijania --------------------------------------------- */
.lf-hero__cue {
	position: absolute;
	left: var(--lf-gutter);
	bottom: clamp(1.5rem, 4vw, 3rem);
	z-index: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	pointer-events: none;
}
/*
 * Wskaznik stoi w marginesie strony, nie w kontenerze - pokazuje sie wiec
 * dopiero wtedy, gdy margines faktycznie jest. Ponizej 1460 px kontener
 * dochodzi do krawedzi okna i kreska wchodzila na przycisk oraz na metryke
 * w kolumnie tekstu.
 */
@media (min-width: 1460px) { .lf-hero__cue { display: flex; } }

.lf-hero__cue-label {
	color: var(--lf-muted);
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

/* Kreska z przesuwającym się rozjaśnieniem - ruch bez przemieszczania
   czegokolwiek, więc nie wymusza przeliczania układu strony. */
.lf-hero__cue-line {
	position: relative;
	width: 1px;
	height: clamp(48px, 6vw, 76px);
	overflow: hidden;
	background: var(--lf-line);
}
.lf-hero__cue-line::after {
	content: "";
	position: absolute;
	left: 0;
	width: 1px;
	height: 42%;
	background: var(--lf-clay);
	animation: lf-cue 2.6s var(--lf-ease-soft) infinite;
}
@keyframes lf-cue {
	0%   { top: -46%; opacity: 0; }
	22%  { opacity: 1; }
	78%  { opacity: 1; }
	100% { top: 104%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-hero__bg--zoom img { animation: none; }
	.lf-hero__cue-line::after { animation: none; top: 30%; }
}

/* --------------------------------------------------------------------------
   39. Gablota ze zdjęciami w sekcji otwierającej
   --------------------------------------------------------------------------
   Jedno okno, kilka zdjęć, każde z własnym podpisem. Wszystkie slajdy leżą
   w tej samej komórce siatki, więc wysokość gabloty nie zmienia się przy
   przejściu - to samo dotyczy podpisów pod nią. Zmiana slajdu jest
   przenikaniem z minimalnym ruchem skali; przesuwanie w bok w tak dużym
   kadrze czytałoby się jak baner reklamowy, a nie jak przewracanie kart.
   -------------------------------------------------------------------------- */
.lf-hgal {
	position: relative;
	display: grid;
	gap: clamp(1.1rem, 2vw, 1.6rem);
}

/*
 * Ramka nosi wszystkie ozdoby i perspektywę. Sam stos slajdów jest osobnym
 * elementem, bo ma overflow: hidden (kurtyna odsłaniająca) - narożnik
 * wystający poza kadr zostałby na nim obcięty.
 */
.lf-hgal__frame {
	position: relative;
	isolation: isolate;
	perspective: 1500px;
}

.lf-hgal__stack {
	position: relative;
	display: grid;
	transform-style: preserve-3d;
	transition: transform 0.55s var(--lf-ease);
	box-shadow: 0 40px 80px -38px rgba(0, 0, 0, 0.7);
}

.lf-hgal__slide {
	grid-area: 1 / 1;
	opacity: 0;
	/* visibility opóźniona o czas przenikania: slajd schodzący zostaje
	   widoczny do końca ruchu, a potem znika dla myszy i czytnika ekranu. */
	visibility: hidden;
	transition: opacity 0.9s var(--lf-ease), visibility 0s linear 0.9s;
}
.lf-hgal__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s var(--lf-ease), visibility 0s;
}

.lf-media--hgal { --lf-ratio: 4 / 5; }
.lf-media--hgal img { object-position: var(--lf-focus, center center); }

/*
 * Skala obrazu należy do karuzeli, nie do kurtyny. Kurtyna (data-lf-mask)
 * ma własną regułę na .lf-media img - trzeba ją przebić specyficznością,
 * inaczej obie pisałyby po tej samej transformacji i slajd stałby w
 * zbliżeniu do końca życia strony.
 */
.lf-hgal__frame .lf-hgal__slide .lf-media img { transform: scale(1.07); }
.lf-hgal__frame .lf-hgal__slide.is-active .lf-media img { transform: scale(1); }

/* --- Narożniki -------------------------------------------------------- */
/* Dwa narożniki po przekątnej, nie cztery: ramka ma być zasugerowana,
   nie narysowana. Pod kursorem rozciągają się wzdłuż krawędzi. */
.lf-hgal__corners {
	position: absolute;
	inset: -0.7rem;
	z-index: 4;
	pointer-events: none;
}
.lf-hgal__corners::before,
.lf-hgal__corners::after {
	content: "";
	position: absolute;
	width: 26px; height: 26px;
	border: 1px solid var(--lf-clay);
	opacity: 0.7;
	transition: width 0.55s var(--lf-ease), height 0.55s var(--lf-ease), opacity 0.55s var(--lf-ease);
}
.lf-hgal__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.lf-hgal__corners::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* --- Rozbłysk --------------------------------------------------------- */
/* Pas światła przechodzący po szkle. Leci raz przy odsłonięciu sekcji
   i raz przy najechaniu - nie w pętli, bo migotanie w kółko męczy. */
.lf-hgal__sheen {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}
.lf-hgal__sheen::before {
	content: "";
	position: absolute;
	top: -60%; left: 0;
	width: 34%; height: 220%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	transform: rotate(14deg) translate3d(-260%, 0, 0);
}
.lf-hgal__frame .lf-hgal__stack.is-in ~ .lf-hgal__sheen::before { animation: lf-hgal-sheen 1.6s var(--lf-ease) 0.55s both; }
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__sheen::before { animation: lf-hgal-sheen 1.1s var(--lf-ease) both; }
@keyframes lf-hgal-sheen {
	from { transform: rotate(14deg) translate3d(-260%, 0, 0); }
	to   { transform: rotate(14deg) translate3d(560%, 0, 0); }
}

/* --- Światło pod kursorem --------------------------------------------- */
/* Ciepła plama chodząca za myszą. soft-light zamiast zwykłego krycia:
   rozjaśnia to, co na zdjęciu jasne, i nie zamula cieni mleczną mgłą. */
.lf-hgal__spot {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s var(--lf-ease);
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 185, 154, 0.4), rgba(201, 185, 154, 0) 68%);
	mix-blend-mode: soft-light;
}

/* --- Stan pod kursorem ------------------------------------------------ */
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__spot { opacity: 1; }
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__corners::before,
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__corners::after {
	width: 46px; height: 46px;
	opacity: 1;
}
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__slide.is-active .lf-media img { transform: scale(1.05); }
.lf-hgal--hover .lf-hgal__frame:hover .lf-hgal__arrow { opacity: 1; }

/* --- Strzałki --------------------------------------------------------- */
/* Widoczne zawsze, choć wyciszone: na ekranie dotykowym nie ma najechania,
   więc ukryte strzałki byłyby dla części odwiedzających strzałkami, których
   nie ma. Kursor tylko je rozjaśnia. */
.lf-hgal__arrows {
	position: absolute;
	right: 0; bottom: 0;
	z-index: 5;
	display: flex;
}
.lf-hgal__arrow {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	padding: 0;
	border: 1px solid rgba(243, 239, 233, 0.22);
	background: rgba(23, 18, 16, 0.5);
	backdrop-filter: blur(8px);
	color: var(--lf-cream);
	cursor: pointer;
	opacity: 0.82;
	transition: opacity 0.35s var(--lf-ease), background-color 0.35s var(--lf-ease), color 0.35s var(--lf-ease);
}
.lf-hgal__arrow + .lf-hgal__arrow { border-left: 0; }
.lf-hgal__arrow:hover,
.lf-hgal__arrow:focus-visible {
	background: var(--lf-cream);
	color: var(--lf-ink);
	opacity: 1;
}
.lf-hgal__arrow .lf-icon { width: 18px; height: 18px; }

/* --- Okrąg z liczbą --------------------------------------------------- */
/* Wpuszczony w lewą krawędź gabloty - wychodzi poza kadr, więc wiąże
   zdjęcie z kolumną tekstu zamiast leżeć na nim jak naklejka. */
.lf-hgal__badge {
	position: absolute;
	left: -3.25rem;
	bottom: 14%;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 116px; height: 116px;
	border: 1px solid var(--lf-line);
	border-radius: 50%;
	background: rgba(243, 239, 233, 0.88);
	backdrop-filter: blur(6px);
	text-align: center;
	line-height: 1.2;
}
@media (min-width: 1200px) { .lf-hgal__badge { display: flex; } }
.lf-hgal__badge span { display: block; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lf-muted); }
.lf-hgal__badge strong { display: block; font-size: 1.7rem; font-weight: 500; color: var(--lf-heading); letter-spacing: -0.02em; }

/* --- Podpis ----------------------------------------------------------- */
.lf-hgal__foot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}
.lf-hgal__count {
	margin: 0;
	padding-top: 0.15rem;
	color: var(--lf-muted);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.lf-hgal__count [data-lf-hgal-current] { color: var(--lf-clay); font-size: 0.95rem; }
.lf-hgal__count-sep { margin: 0 0.15rem; opacity: 0.5; }

/* Podpisy leżą jeden na drugim, więc blok jest wysoki na najdłuższy z nich
   i zmiana slajdu nie przesuwa niczego pod spodem. */
.lf-hgal__caps { display: grid; }
.lf-hgal__cap {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.55s var(--lf-ease), transform 0.55s var(--lf-ease), visibility 0s linear 0.55s;
}
.lf-hgal__cap.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	/* Podpis wchodzi chwilę po zdjęciu - najpierw obraz, potem jego opis. */
	transition: opacity 0.55s var(--lf-ease) 0.18s, transform 0.55s var(--lf-ease) 0.18s, visibility 0s;
}
.lf-hgal__cap-title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
	color: var(--lf-clay);
	font-size: var(--lf-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--lf-ls-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}
.lf-hgal__cap-title::before {
	content: "";
	width: 1.5rem; height: 1px;
	background: currentColor;
	opacity: 0.55;
	transition: width 0.5s var(--lf-ease);
}
.lf-hgal--hover:hover .lf-hgal__cap.is-active .lf-hgal__cap-title::before { width: 3rem; }
.lf-hgal__cap-text {
	display: block;
	max-width: 42ch;
	color: var(--lf-fg);
	font-size: 0.875rem;
	line-height: 1.65;
}

/* --- Pasek nawigacji -------------------------------------------------- */
/* Kreski zamiast kropek, a odliczanie do zmiany slajdu jedzie po kresce
   aktywnej. Jeden element mniej niż osobny pasek postępu, a informacja
   ta sama: gdzie jesteśmy i ile zostało. */
.lf-hgal__rail {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.lf-hgal__tick {
	position: relative;
	width: 30px; height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width 0.5s var(--lf-ease);
}
.lf-hgal__tick::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 1px;
	background: var(--lf-line);
	transition: background-color 0.35s var(--lf-ease);
}
.lf-hgal__tick:hover::before,
.lf-hgal__tick:focus-visible::before { background: var(--lf-muted); }
.lf-hgal__tick.is-active { width: 68px; }
.lf-hgal__tick-fill {
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 1px;
	background: var(--lf-clay);
	transform: scaleX(0);
	transform-origin: left center;
}
.lf-hgal__tick.is-active .lf-hgal__tick-fill { transform: scaleX(1); }
/* Odliczanie tylko wtedy, gdy karuzela naprawdę sama się przewija. */
.lf-hgal[data-lf-hgal-time] .lf-hgal__tick.is-active .lf-hgal__tick-fill {
	animation: lf-hgal-fill var(--hgal-time, 6s) linear forwards;
}
.lf-hgal.is-paused .lf-hgal__tick-fill { animation-play-state: paused; }
@keyframes lf-hgal-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --- Gablota bez zdjęć ------------------------------------------------ */
.lf-hgal--empty .lf-media--hgal { display: grid; place-items: center; }

@media (max-width: 899px) {
	/* Kadr 4:5 zajmowałby na telefonie cały ekran, a pod nim nie zostałoby
	   miejsca na podpis - stąd kwadrat. Reguła musi stać po bazowej
	   proporcji z tej samej sekcji: przy równej mocy decyduje kolejność,
	   a zapytanie medialne jej nie podnosi. */
	.lf-media--hgal { --lf-ratio: 1 / 1; }
	.lf-hgal__arrow { width: 46px; height: 46px; }
	.lf-hgal__foot { gap: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lf-hgal__stack { transform: none !important; }
	.lf-hgal__sheen { display: none; }
	.lf-hgal__spot { display: none; }
	.lf-hgal__frame .lf-hgal__slide .lf-media img,
	.lf-hgal__frame .lf-hgal__slide.is-active .lf-media img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   40. Akcenty sekcji otwierającej
   --------------------------------------------------------------------------
   Trzy rzeczy, których nie widać osobno, a razem odklejają otwarcie od
   przeciętnego banera: ciepła poświata pod gablotą, ziarno na wierzchu
   i złoto z logo w wyróżnieniu nagłówka.
   -------------------------------------------------------------------------- */

/* --- Poświata --------------------------------------------------------- */
.lf-hero__glow {
	position: absolute;
	right: -10%;
	top: 2%;
	z-index: 0;
	width: min(62vw, 820px);
	aspect-ratio: 1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(201, 185, 154, 0.22), rgba(201, 185, 154, 0) 62%);
	filter: blur(30px);
}
.lf-hero:not(.lf-hero--dark) .lf-hero__glow {
	background: radial-gradient(circle, rgba(164, 138, 88, 0.16), rgba(164, 138, 88, 0) 62%);
}
@media (max-width: 899px) { .lf-hero__glow { top: 22%; right: -30%; width: 110vw; } }

/* --- Ziarno ----------------------------------------------------------- */
/*
 * Szum rysowany filtrem SVG, nie plikiem - zero dodatkowych zapytań i
 * ostrość niezależna od gęstości ekranu. Leży nad treścią, bo ziarno na
 * zdjęciu i ziarno na literach muszą być tym samym ziarnem; przy tym kryciu
 * kontrast tekstu nie schodzi zauważalnie.
 */
.lf-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.38;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* --- Etykieta z rombem ------------------------------------------------- */
/* Kreska, napis, mały romb - znak interpunkcyjny, który zamyka etykietę
   i zapowiada, że sekcja jest dopracowana także w drobiazgach. */
.lf-hero .lf-eyebrow::after {
	content: "";
	width: 4px; height: 4px;
	background: currentColor;
	transform: rotate(45deg);
	opacity: 0.75;
}

/* --- Złoto w nagłówku -------------------------------------------------- */
/*
 * Wyróżnienie w nagłówku dostaje gradient ze znaku firmowego zamiast
 * jednolitej gliny. Stopnie są przesunięte w stronę jasnych tonów:
 * najciemniejszy punkt ma na tuszu 4,6:1, czyli powyżej progu dla tekstu
 * tej wielkości.
 *
 * Gradient siedzi na pojedynczym słowie, nie na całym <em>. Powód jest
 * praktyczny: <em> jest elementem liniowym, a JavaScript wkłada w niego
 * słowa jako inline-block z własnym overflow. Przycinanie tła do liter
 * takiego elementu gubi tekst - <em> znikał z nagłówka. Słowo ma własne,
 * zwykłe pudełko, więc przycięcie działa na nim przewidywalnie.
 *
 * Gdy JavaScript nie wystartuje, słów nie ma i wyróżnienie zostaje przy
 * jednolitym kolorze ustawionym wcześniej. Nic nie znika w żadnej ścieżce.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.lf-hero--dark .lf-hero__title em .lf-word > span {
		background-image: linear-gradient(102deg, #c9b99a 0%, #efe6d2 46%, #b79c6b 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* --------------------------------------------------------------------------
   41. Sklep
   --------------------------------------------------------------------------
   WooCommerce przynosi wlasny arkusz z inna typografia, innym rytmem i
   zaokraglonymi przyciskami. Zamiast go wylaczac - co zabiera razem z
   wygladem takze stany koszyka i komunikaty - nadpisujemy to, co widac:
   siatke, karte produktu, tabele i formularze. Kolory i odstepy biora sie
   z tych samych zmiennych, co reszta serwisu.
   -------------------------------------------------------------------------- */

/* --- Siatka produktow -------------------------------------------------- */
.lf-produkty__siatka {
	display: grid;
	grid-template-columns: repeat(var(--lf-kolumny, 3), minmax(0, 1fr));
	gap: var(--lf-gap);
}
.lf-produkty__wiecej { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }

.lf-produkt {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.lf-produkt__kadr { position: relative; display: block; }

/*
 * Zdjecia produktowe to packshoty na cieplej bieli. Kadr dostaje dokladnie
 * ten sam odcien tla, wiec przedmiot nie stoi na prostokacie innej bieli,
 * a object-fit: contain gwarantuje, ze wystajaca wylewka baterii nie zostanie
 * ucieta przy nietypowych proporcjach pliku.
 */
.lf-media--produkt {
	--lf-ratio: 1 / 1;
	background: #f4f0ed;
}
.lf-media--produkt img {
	object-fit: contain;
	padding: 6%;
}

.lf-produkt__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(23, 18, 16, 0.16), transparent 55%);
	opacity: 0;
	transition: opacity var(--lf-dur-fast) var(--lf-ease);
}
.lf-produkt:hover .lf-produkt__overlay { opacity: 1; }

.lf-produkt__promo {
	position: absolute;
	top: 0.9rem; left: 0.9rem;
	z-index: 2;
	padding: 0.3rem 0.6rem;
	background: var(--lf-ink);
	color: var(--lf-cream);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lf-produkt__cialo { display: flex; flex-direction: column; gap: 0.5rem; }
.lf-produkt__kat {
	color: var(--lf-muted);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.lf-produkt__nazwa {
	margin: 0;
	font-size: var(--lf-fs-h4);
	line-height: 1.25;
}
.lf-produkt__nazwa a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--lf-dur-fast) var(--lf-ease);
}
.lf-produkt__nazwa a:hover,
.lf-produkt__nazwa a:focus-visible { background-size: 100% 1px; }

.lf-produkt__cena {
	color: var(--lf-heading);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.lf-produkt__cena del { margin-right: 0.5rem; color: var(--lf-muted); font-weight: 400; }
.lf-produkt__cena ins { text-decoration: none; }
.lf-produkt__akcja { margin-top: 0.35rem; }
.lf-produkt__akcja .added_to_cart {
	display: inline-block;
	margin-left: 0.85rem;
	color: var(--lf-accent);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --- Siatka na stronach sklepu ----------------------------------------- */
/* WooCommerce rysuje liste jako <ul> z klasami columns-N i wlasnymi
   szerokosciami procentowymi. Przestawiamy ja na siatke - procenty przy
   trzech kolumnach zostawialy przy prawej krawedzi wolne pole. */
.lf-woo ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lf-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.lf-woo ul.products::before,
.lf-woo ul.products::after { display: none; }
.lf-woo ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
}
@media (max-width: 1023px) { .lf-woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lf-woo ul.products { grid-template-columns: minmax(0, 1fr); } }

.lf-woo ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 1.1rem;
	background: #f4f0ed;
}
.lf-woo ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	margin: 0 0 0.4rem;
	font-size: var(--lf-fs-h4);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--lf-ls-heading);
}
.lf-woo ul.products li.product .price {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--lf-heading);
	font-size: 1.05rem;
	font-weight: 500;
}
.lf-woo ul.products li.product .price del { color: var(--lf-muted); font-weight: 400; }
.lf-woo ul.products li.product .price ins { text-decoration: none; }
.lf-woo ul.products li.product a { text-decoration: none; color: inherit; }

.lf-woo .woocommerce-result-count { color: var(--lf-muted); font-size: 0.82rem; }
.lf-woo .woocommerce-ordering select,
.lf-woo select {
	padding: 0.7rem 1rem;
	border: 1px solid var(--lf-line);
	border-radius: 0;
	background: transparent;
	color: var(--lf-fg);
	font-family: inherit;
	font-size: 0.85rem;
}
.lf-woo .woocommerce-ordering { margin-bottom: 2rem; }

/* --- Karta produktu ----------------------------------------------------- */
/*
 * Uklad karty (woocommerce/content-single-product.php):
 * galeria + panel zakupu -> spis sekcji -> opis, specyfikacja, dostawa,
 * opinie -> pasek "dlaczego u nas" -> polecane.
 *
 * Arkusz WooCommerce stylizuje ".woocommerce div.product" plywaniem
 * i szerokosciami procentowymi. Karta nie uzywa jego klas galerii, a panel
 * zdejmuje plywanie selektorem o tej samej mocy - stad "div.summary".
 */
.lf-woo .product { margin: 0; }
.lf-woo div.product div.summary { float: none; width: auto; margin: 0; }

.lf-karta__gora {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
@media (min-width: 900px) {
	.lf-karta__gora { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.lf-karta__panel { position: sticky; top: 6.5rem; }
}

/* Galeria ---------------------------------------------------------------- */
.lf-galeria { min-width: 0; }
.lf-galeria__scena {
	position: relative;
	background: #f4f0ed;
	overflow: hidden;
}
.lf-galeria__tor {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.lf-galeria__tor::-webkit-scrollbar { display: none; }
.lf-galeria__tor:focus-visible { outline: 2px solid var(--lf-clay); outline-offset: -2px; }
.lf-galeria__slajd {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	aspect-ratio: 1 / 1;
}
.lf-galeria__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lf-galeria__slajd img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.9s var(--lf-ease);
}
@media (hover: hover) {
	.lf-galeria__link:hover img { transform: scale(1.035); }
}

.lf-galeria__strzalka,
.lf-galeria__lupa {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--lf-line-soft);
	border-radius: 50%;
	background: rgba(243, 239, 233, 0.92);
	color: var(--lf-ink);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color var(--lf-dur-fast) var(--lf-ease), opacity var(--lf-dur-fast) var(--lf-ease), transform var(--lf-dur-fast) var(--lf-ease);
}
.lf-galeria__strzalka svg,
.lf-galeria__lupa svg { width: 18px; height: 18px; }
.lf-galeria__strzalka:hover,
.lf-galeria__lupa:hover { background: var(--lf-ink); color: var(--lf-cream); }
.lf-galeria__strzalka { top: 50%; transform: translateY(-50%); }
.lf-galeria__strzalka--wstecz { left: 1rem; }
.lf-galeria__strzalka--dalej { right: 1rem; }
.lf-galeria__strzalka[disabled] { opacity: 0; pointer-events: none; }
.lf-galeria__lupa { right: 1rem; bottom: 1rem; }
/* Strzalki pojawiaja sie przy najechaniu na scene; na ekranie dotykowym
   sa zawsze - tam nie ma "najechania", a przesuniecie palcem nie kazdy zna. */
@media (hover: hover) and (min-width: 900px) {
	.lf-galeria__strzalka { opacity: 0; }
	.lf-galeria__scena:hover .lf-galeria__strzalka:not([disabled]),
	.lf-galeria__strzalka:focus-visible { opacity: 1; }
}
.lf-galeria__licznik {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(243, 239, 233, 0.92);
	color: var(--lf-muted);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
}
.lf-galeria__licznik b { color: var(--lf-ink); font-weight: 600; }

.lf-galeria__miniatury {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 5 * 0.65rem) / 6);
	gap: 0.65rem;
	margin-top: 0.65rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.lf-galeria__miniatury::-webkit-scrollbar { display: none; }
@media (max-width: 599px) { .lf-galeria__miniatury { grid-auto-columns: calc((100% - 4 * 0.5rem) / 5); gap: 0.5rem; } }
.lf-galeria__miniatura {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	background: #f4f0ed;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--lf-dur-fast) var(--lf-ease);
}
.lf-galeria__miniatura::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	transition: border-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; }
.lf-galeria__miniatura:hover { opacity: 1; }
.lf-galeria__miniatura.is-active { opacity: 1; }
.lf-galeria__miniatura.is-active::after { border: 2px solid var(--lf-ink); }

/* Odznaki na zdjeciu i na kaflach. */
.lf-odznaki {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	pointer-events: none;
}
.lf-odznaka {
	padding: 0.4rem 0.7rem;
	background: var(--lf-ink);
	color: var(--lf-cream);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}
.lf-odznaka--nowosc { background: var(--lf-clay); color: var(--lf-white); }
.lf-produkt .lf-odznaki { top: 0.9rem; left: 0.9rem; }

/* Pelny ekran. <dialog> daje za darmo pulapke fokusu, Esc i warstwe nad
   strona; skrypt dodaje tylko przewijanie zdjec. */
.lf-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(23, 18, 16, 0.96);
	color: var(--lf-cream);
}
.lf-lightbox::backdrop { background: rgba(23, 18, 16, 0.96); }
.lf-lightbox[open] { display: grid; place-items: center; animation: lf-lb-in 0.35s var(--lf-ease); }
@keyframes lf-lb-in { from { opacity: 0; } to { opacity: 1; } }
.lf-lightbox__kadr { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(3.5rem, 6vw, 5rem) clamp(0.5rem, 6vw, 6rem); }
.lf-lightbox__kadr img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #f4f0ed; }
.lf-lightbox__zamknij,
.lf-lightbox__strzalka {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(243, 239, 233, 0.25);
	border-radius: 50%;
	background: transparent;
	color: var(--lf-cream);
	cursor: pointer;
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease);
}
.lf-lightbox__zamknij svg,
.lf-lightbox__strzalka svg { width: 20px; height: 20px; }
.lf-lightbox__zamknij:hover,
.lf-lightbox__strzalka:hover { background: var(--lf-cream); color: var(--lf-ink); }
.lf-lightbox__zamknij { top: 1rem; right: 1rem; }
.lf-lightbox__strzalka { top: 50%; transform: translateY(-50%); }
.lf-lightbox__strzalka--wstecz { left: 1rem; }
.lf-lightbox__strzalka--dalej { right: 1rem; }
@media (max-width: 599px) {
	.lf-lightbox__strzalka { top: auto; bottom: 1rem; transform: none; }
}
.lf-lightbox__licznik {
	position: absolute;
	top: 1.9rem;
	left: 1.5rem;
	color: rgba(243, 239, 233, 0.6);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}
.lf-lightbox__licznik b { color: var(--lf-cream); font-weight: 600; }
body.lf-bez-przewijania { overflow: hidden; }

/* Panel zakupu ----------------------------------------------------------- */
.lf-karta__etykiety {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1rem;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.lf-karta__kategoria { color: var(--lf-clay); font-weight: 600; }
.lf-karta__kategoria:hover { color: var(--lf-ink); }
.lf-karta__symbol { color: var(--lf-muted); }

.lf-woo div.product .lf-karta__tytul {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.lf-karta__ocena {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	color: var(--lf-muted);
	font-size: 0.82rem;
}
.lf-karta__ocena .star-rating { margin: 0; color: var(--lf-gold); font-size: 0.9rem; }
.lf-karta__ocena:hover span { color: var(--lf-ink); }

.lf-woo div.product .lf-karta__lead {
	margin-bottom: 1.5rem;
	padding: 0;
	border: 0;
	color: var(--lf-fg);
	font-size: 1.02rem;
	line-height: 1.7;
}

.lf-cechy {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 1.75rem;
	border: 1px solid var(--lf-line-soft);
	background: var(--lf-line-soft);
}
.lf-cechy > div { padding: 0.8rem 1rem; background: var(--lf-bg); }
.lf-cechy > div:only-child,
.lf-cechy > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lf-cechy dt {
	margin: 0 0 0.2rem;
	color: var(--lf-muted);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.lf-cechy dd { margin: 0; color: var(--lf-heading); font-size: 0.86rem; line-height: 1.45; }

.lf-karta__zakup {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--lf-line-soft);
}
.lf-karta__cena-wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.lf-woo div.product p.price.lf-karta__cena {
	margin: 0;
	color: var(--lf-heading);
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
}
.lf-karta__cena del { margin-right: 0.4rem; color: var(--lf-muted); font-size: 0.55em; font-weight: 400; }
.lf-karta__cena ins { text-decoration: none; }
.lf-karta__oszczedzasz {
	padding: 0.3rem 0.6rem;
	background: rgba(126, 100, 55, 0.12);
	color: var(--lf-clay-dark);
	font-size: 0.78rem;
	font-weight: 600;
}
.lf-karta__vat { margin: 0.35rem 0 1.1rem; color: var(--lf-muted); font-size: 0.78rem; }
.lf-karta__vat a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lf-karta__vat a:hover { color: var(--lf-clay); }

.lf-stan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
	margin: 0 0 1.25rem;
	font-size: 0.86rem;
}
.lf-stan strong { color: var(--lf-heading); font-weight: 600; }
.lf-stan > span:last-child { color: var(--lf-muted); }
.lf-stan > span:last-child::before { content: "·"; margin-right: 0.6rem; }
.lf-stan__kropka {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3f8a4f;
}
.lf-stan.is-jest .lf-stan__kropka::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: #3f8a4f;
	opacity: 0.25;
	animation: lf-puls 2.2s var(--lf-ease-soft) infinite;
}
.lf-stan.is-malo .lf-stan__kropka { background: #c28a1e; }
.lf-stan.is-brak .lf-stan__kropka { background: #a03232; }
@keyframes lf-puls { 0% { transform: scale(0.6); opacity: 0.45; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lf-stan__kropka::after { animation: none !important; } }
@media (max-width: 599px) {
	.lf-stan > span:last-child { flex-basis: 100%; padding-left: calc(9px + 0.6rem); }
	.lf-stan > span:last-child::before { display: none; }
	.woocommerce div.product .lf-karta__formularz form.cart .single_add_to_cart_button { padding-inline: 1rem; letter-spacing: 0.06em; white-space: nowrap; }
}

/* Formularz zakupu: ilosc z przyciskami +/- i szeroki przycisk. */
.woocommerce div.product .lf-karta__formularz form.cart {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.65rem;
	align-items: stretch;
	margin: 0;
}
.woocommerce div.product .lf-karta__formularz form.cart.variations_form,
.woocommerce div.product .lf-karta__formularz form.cart.grouped_form { flex-wrap: wrap; }
.lf-karta__formularz .quantity {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	border: 1px solid var(--lf-line);
	border-radius: 999px;
	background: var(--lf-white);
	overflow: hidden;
}
.woocommerce .lf-karta__formularz .quantity input[type="number"] {
	width: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lf-heading);
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
.lf-karta__formularz .quantity input::-webkit-outer-spin-button,
.lf-karta__formularz .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lf-ilosc__btn {
	width: 2.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lf-ink);
	font-family: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-ilosc__btn:hover { background: var(--lf-sand); }
.woocommerce div.product .lf-karta__formularz form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	justify-content: center;
	min-height: 54px;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
}
.woocommerce div.product .lf-karta__formularz form.cart .single_add_to_cart_button::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lf-karta__formularz .stock { display: none; }
.lf-karta__formularz table.variations { width: 100%; margin-bottom: 1rem; }

/* Prog darmowej dostawy. */
.lf-prog { margin-top: 1rem; font-size: 0.84rem; }
.lf-prog p { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--lf-fg); }
.lf-prog .lf-icon { width: 20px; height: 20px; flex: none; color: var(--lf-clay); }
.lf-prog .amount { color: var(--lf-heading); font-weight: 600; }
.lf-prog__pasek { display: block; height: 4px; margin-top: 0.6rem; border-radius: 4px; background: var(--lf-sand); overflow: hidden; }
.lf-prog__pasek > span { display: block; height: 100%; background: var(--lf-clay); border-radius: inherit; transition: width 0.8s var(--lf-ease); }
.lf-prog.is-osiagniety .lf-icon,
.lf-prog.is-osiagniety p { color: #3f8a4f; }
.lf-prog.is-osiagniety .lf-prog__pasek > span { background: #3f8a4f; }

/* Gwarancje pod zakupem. */
.lf-zaufanie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 420px) { .lf-zaufanie { grid-template-columns: minmax(0, 1fr); } }
.lf-zaufanie li { display: flex; gap: 0.7rem; margin: 0; }
.lf-zaufanie .lf-icon { width: 22px; height: 22px; flex: none; margin-top: 0.1rem; color: var(--lf-clay); }
.lf-zaufanie strong { display: block; color: var(--lf-heading); font-size: 0.84rem; font-weight: 600; line-height: 1.35; }
.lf-zaufanie span { display: block; margin-top: 0.15rem; color: var(--lf-muted); font-size: 0.78rem; line-height: 1.5; }

/* Doradztwo. */
.lf-pomoc {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--lf-line);
}
.lf-pomoc__tytul { margin: 0 0 0.25rem; color: var(--lf-heading); font-size: 0.95rem; font-weight: 600; }
.lf-pomoc__tekst { margin: 0 0 0.85rem; color: var(--lf-fg); font-size: 0.85rem; line-height: 1.6; }
.lf-pomoc__akcje { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lf-pomoc__akcje a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--lf-line);
	border-radius: 999px;
	color: var(--lf-ink);
	font-size: 0.82rem;
	font-weight: 500;
	transition: border-color var(--lf-dur-fast) var(--lf-ease), background-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-pomoc__akcje a:hover { border-color: var(--lf-ink); background: var(--lf-white); }
.lf-pomoc__akcje .lf-icon { width: 16px; height: 16px; color: var(--lf-clay); }
.lf-pomoc__godziny { margin: 0.6rem 0 0; color: var(--lf-muted); font-size: 0.75rem; }

/* Spis sekcji ------------------------------------------------------------ */
.lf-karta__spis {
	position: sticky;
	top: var(--lf-naglowek, 5rem);
	z-index: 20;
	display: flex;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: clamp(3.5rem, 7vw, 6rem) 0 0;
	padding: 0 0.1rem;
	border-bottom: 1px solid var(--lf-line);
	background: var(--lf-bg);
	overflow-x: auto;
	scrollbar-width: none;
}
.lf-karta__spis::-webkit-scrollbar { display: none; }
.lf-karta__spis a {
	position: relative;
	flex: none;
	padding: 1.1rem 0;
	color: var(--lf-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--lf-dur-fast) var(--lf-ease);
}
.lf-karta__spis a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--lf-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lf-dur-fast) var(--lf-ease);
}
.lf-karta__spis a:hover,
.lf-karta__spis a.is-active { color: var(--lf-ink); }
.lf-karta__spis a.is-active::after { transform: scaleX(1); }

/* Sekcje opisu ----------------------------------------------------------- */
.lf-karta__sekcja {
	display: grid;
	gap: 1.25rem clamp(2rem, 5vw, 4.5rem);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-bottom: 1px solid var(--lf-line);
	scroll-margin-top: 9rem;
}
@media (min-width: 900px) {
	.lf-karta__sekcja { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.lf-karta__naglowek { position: sticky; top: 11rem; align-self: start; }
}
.lf-karta__naglowek .lf-eyebrow { margin-bottom: 0.9rem; }
.lf-karta__naglowek h2 { margin: 0; font-size: var(--lf-fs-h3); }
.lf-karta__tresc { min-width: 0; max-width: 46rem; }

.lf-prose { color: var(--lf-fg); font-size: 1rem; line-height: 1.8; }
.lf-prose > *:first-child { margin-top: 0; }
.lf-prose h3 {
	margin: 2.25rem 0 0.9rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.lf-prose ul,
.lf-lista-check {
	display: grid;
	gap: 0.55rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.lf-prose ul li,
.lf-lista-check li {
	position: relative;
	margin: 0;
	padding-left: 1.9rem;
	line-height: 1.6;
}
.lf-prose ul li::before,
.lf-lista-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: rgba(126, 100, 55, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e6437' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
/* Dluga lista krotkich pozycji (zgodne systemy, zawartosc zestawu) czyta
   sie lepiej w dwoch kolumnach niz jako slupek na pol ekranu. */
@media (min-width: 600px) {
	.lf-prose ul:has(> li:nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
.lf-prose ol { padding-left: 1.3rem; }
.lf-prose strong { color: var(--lf-heading); font-weight: 600; }
.lf-prose a { color: var(--lf-clay); text-decoration: underline; text-underline-offset: 3px; }
.lf-prose img { margin: 1.5rem 0; background: #f4f0ed; }

/* Specyfikacja jako tabela z naprzemiennym tlem. */
.lf-spec { margin: 0; border-top: 1px solid var(--lf-line); }
.lf-spec > div {
	display: grid;
	grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr);
	gap: 1rem;
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var(--lf-line-soft);
}
.lf-spec > div:nth-child(odd) { background: rgba(255, 255, 255, 0.45); }
.lf-spec dt { margin: 0; color: var(--lf-muted); font-size: 0.85rem; }
.lf-spec dd { margin: 0; color: var(--lf-heading); font-size: 0.9rem; font-weight: 500; }
.lf-spec a { color: var(--lf-clay); }
@media (max-width: 479px) { .lf-spec > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

/* Dostawa. */
.lf-dostawa { display: grid; gap: 2.25rem; }
.lf-dostawa__blok h3 {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 600;
}
.lf-dostawa__blok h3 .lf-icon { width: 22px; height: 22px; color: var(--lf-clay); }
.lf-dostawa__blok p { font-size: 0.95rem; }
.lf-dostawa__tabela {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.lf-dostawa__tabela th,
.lf-dostawa__tabela td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--lf-line-soft); text-align: left; }
.lf-dostawa__tabela thead th {
	color: var(--lf-muted);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom-color: var(--lf-line);
}
.lf-dostawa__tabela tbody th { color: var(--lf-heading); font-weight: 600; }
.lf-dostawa__tabela tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.45); }
@media (max-width: 479px) { .lf-dostawa__tabela th, .lf-dostawa__tabela td { padding: 0.7rem 0.5rem; } }

/* Opinie (szablon WooCommerce single-product-reviews.php). */
.lf-karta__sekcja--opinie .woocommerce-Reviews-title { display: none; }
.lf-karta__sekcja--opinie .woocommerce-noreviews {
	margin: 0 0 2rem;
	border-top-width: 1px;
	background: transparent;
}
.lf-karta__sekcja--opinie .commentlist { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.lf-karta__sekcja--opinie .commentlist li { margin: 0 0 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--lf-line-soft); background: rgba(255, 255, 255, 0.5); }
.woocommerce .lf-karta__sekcja--opinie #reviews #comments ol.commentlist li img.avatar { display: none; }
.woocommerce .lf-karta__sekcja--opinie #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 0; border: 0; }
.lf-karta__sekcja--opinie .star-rating { color: var(--lf-gold); }
.lf-karta__sekcja--opinie #review_form_wrapper {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--lf-line-soft);
	background: rgba(255, 255, 255, 0.5);
}
.lf-karta__sekcja--opinie .comment-reply-title {
	display: block;
	margin-bottom: 1rem;
	color: var(--lf-heading);
	font-size: 1.15rem;
	font-weight: 600;
}
.lf-karta__sekcja--opinie .comment-form label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--lf-muted);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.lf-karta__sekcja--opinie .comment-form textarea,
.lf-karta__sekcja--opinie .comment-form input[type="text"],
.lf-karta__sekcja--opinie .comment-form input[type="email"] {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--lf-line);
	background: var(--lf-white);
	color: var(--lf-fg);
	font-family: inherit;
	font-size: 0.95rem;
}
.lf-karta__sekcja--opinie .comment-form p { margin-bottom: 1.1rem; }
.lf-karta__sekcja--opinie .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }
.woocommerce .lf-karta__sekcja--opinie p.stars a { color: var(--lf-gold); }

/* Dlaczego u nas ---------------------------------------------------------
   Ciemny pas na cala szerokosc okna, choc sekcja stoi w kontenerze sklepu. */
.lf-dlaczego {
	margin: clamp(4rem, 8vw, 7rem) calc(50% - 50vw) 0;
	padding: clamp(3.5rem, 7vw, 6rem) max(var(--lf-gutter), calc(50vw - var(--lf-container) / 2 + var(--lf-gutter)));
	background: var(--lf-ink);
	color: rgba(243, 239, 233, 0.72);
}
.lf-dlaczego__glowa { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.lf-dlaczego .lf-eyebrow { color: var(--lf-gold-light); }
.lf-dlaczego h2 { margin: 0; color: var(--lf-cream); font-size: var(--lf-fs-h3); }
.lf-dlaczego__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1023px) { .lf-dlaczego__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lf-dlaczego__lista { grid-template-columns: minmax(0, 1fr); } }
.lf-dlaczego__lista li { margin: 0; padding-top: 1.5rem; border-top: 1px solid rgba(243, 239, 233, 0.16); }
.lf-dlaczego__lista .lf-icon { width: 28px; height: 28px; margin-bottom: 1.1rem; color: var(--lf-gold-light); }
.lf-dlaczego__lista h3 { margin: 0 0 0.5rem; color: var(--lf-cream); font-size: 1.05rem; font-weight: 600; }
.lf-dlaczego__lista p { margin: 0; font-size: 0.9rem; line-height: 1.65; }
.lf-dlaczego__akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Polecane --------------------------------------------------------------- */
.lf-polecane { margin-top: clamp(4rem, 8vw, 7rem); }
.lf-polecane__glowa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.lf-polecane__glowa h2 { margin: 0; font-size: var(--lf-fs-h3); }
.lf-polecane__siatka { --lf-kolumny: 4; }
@media (max-width: 1023px) { .lf-polecane__siatka { --lf-kolumny: 2; } }
@media (max-width: 599px) {
	/* Na telefonie kafle przesuwa sie w bok zamiast przewijac cztery ekrany. */
	.lf-polecane__siatka {
		display: flex;
		gap: 1rem;
		margin-inline: calc(var(--lf-gutter) * -1);
		padding-inline: var(--lf-gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--lf-gutter);
		scrollbar-width: none;
	}
	.lf-polecane__siatka::-webkit-scrollbar { display: none; }
	.lf-polecane__siatka > .lf-produkt { flex: 0 0 72%; scroll-snap-align: start; }
}
.lf-polecane .lf-produkt__nazwa { font-size: 1rem; font-weight: 500; }

/* Pasek zakupu na telefonie ---------------------------------------------- */
.lf-pasek-zakupu {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem var(--lf-gutter) calc(0.65rem + env(safe-area-inset-bottom));
	background: rgba(243, 239, 233, 0.97);
	border-top: 1px solid var(--lf-line);
	box-shadow: 0 -12px 30px -18px rgba(23, 18, 16, 0.35);
	transform: translateY(110%);
	transition: transform 0.45s var(--lf-ease);
}
.lf-pasek-zakupu[hidden] { display: none; }
.lf-pasek-zakupu.is-widoczny { transform: translateY(0); }
.lf-pasek-zakupu__kadr { flex: none; width: 48px; height: 48px; background: #f4f0ed; }
.lf-pasek-zakupu__kadr img { width: 100%; height: 100%; object-fit: contain; }
.lf-pasek-zakupu__opis { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lf-pasek-zakupu__nazwa { overflow: hidden; color: var(--lf-heading); font-size: 0.8rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.lf-pasek-zakupu__cena { color: var(--lf-heading); font-size: 0.95rem; font-weight: 600; }
.lf-pasek-zakupu__cena del { color: var(--lf-muted); font-weight: 400; font-size: 0.8em; }
.lf-pasek-zakupu__cena ins { text-decoration: none; }
.lf-pasek-zakupu .lf-btn { flex: none; min-height: 44px; }
@media (min-width: 900px) {
	.lf-pasek-zakupu__kadr { width: 56px; height: 56px; }
	.lf-pasek-zakupu { padding-inline: max(var(--lf-gutter), calc(50vw - var(--lf-container) / 2 + var(--lf-gutter))); }
	.lf-pasek-zakupu__nazwa { font-size: 0.95rem; }
}
/* Miejsce na pasek, zeby nie zaslanial stopki. */
.single-product.lf-ma-pasek .lf-footer { padding-bottom: 5rem; }

/* --- Przyciski, komunikaty, formularze ---------------------------------- */
/* Przycisk WooCommerce dostaje wyglad przycisku motywu bez zmiany klasy -
   inaczej stracilibysmy dodawanie do koszyka bez przeladowania strony. */
.woocommerce a.button:not(.lf-btn),
.woocommerce button.button:not(.lf-btn),
.woocommerce input.button:not(.lf-btn),
.woocommerce #respond input#submit,
.lf-woo button[type="submit"]:not(.lf-btn) {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.7rem;
	border: 1px solid var(--lf-ink);
	border-radius: 0;
	background: var(--lf-ink);
	color: var(--lf-cream);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--lf-dur-fast) var(--lf-ease), color var(--lf-dur-fast) var(--lf-ease);
}
.woocommerce a.button:not(.lf-btn):hover,
.woocommerce button.button:not(.lf-btn):hover,
.woocommerce input.button:not(.lf-btn):hover,
.woocommerce #respond input#submit:hover { background: transparent; color: var(--lf-ink); }
.woocommerce a.button.alt:not(.lf-btn),
.woocommerce button.button.alt:not(.lf-btn),
.woocommerce input.button.alt:not(.lf-btn) { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); }
.woocommerce a.button.alt:not(.lf-btn):hover,
.woocommerce button.button.alt:not(.lf-btn):hover,
.woocommerce input.button.alt:not(.lf-btn):hover { background: var(--lf-brown); border-color: var(--lf-brown); color: var(--lf-cream); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	margin-bottom: 2rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--lf-line);
	border-top: 2px solid var(--lf-accent);
	border-radius: 0;
	background: var(--lf-bg-alt);
	color: var(--lf-fg);
	font-size: 0.9rem;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-error { border-top-color: #a03232; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input[type="number"],
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"] {
	width: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--lf-line);
	border-radius: 0;
	background: transparent;
	color: var(--lf-fg);
	font-family: inherit;
	font-size: 0.95rem;
}
.woocommerce form .form-row label {
	margin-bottom: 0.45rem;
	color: var(--lf-muted);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.woocommerce .quantity input[type="number"] { width: 5.5rem; text-align: center; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.woocommerce div.product form.cart .button { flex: 1 1 12rem; justify-content: center; }

/* --- Tabele: koszyk, zamowienie, konto ---------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
	border: 1px solid var(--lf-line);
	border-radius: 0;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 1rem;
	border-color: var(--lf-line);
}
.woocommerce table.shop_table th {
	color: var(--lf-muted);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.woocommerce table.shop_table td.product-name a { color: var(--lf-heading); text-decoration: none; }
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 { font-size: var(--lf-fs-h4); }
.woocommerce .cart_totals { --lf-fs-h2: var(--lf-fs-h4); }

.woocommerce-MyAccount-navigation ul { margin: 0 0 2rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--lf-line);
	color: var(--lf-muted);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--lf-cream); }

/* Cena przekreslona i etykieta promocji w calym sklepie. */
.woocommerce span.onsale {
	position: absolute;
	top: 0.9rem; left: 0.9rem;
	min-height: 0;
	min-width: 0;
	padding: 0.3rem 0.6rem;
	border-radius: 0;
	background: var(--lf-ink);
	color: var(--lf-cream);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}
.woocommerce ul.products li.product { position: relative; }

/* --------------------------------------------------------------------------
   42. Wybór języka
   --------------------------------------------------------------------------
   Flaga jest tu znakiem rozpoznawczym, a nie ilustracją - stąd mały rozmiar,
   delikatna obwódka i skrót językowy obok. Sam obrazek flagi nie wystarcza:
   przy 22 px odróżnienie kilku trójkolorowych flag bywa loterią, a skrót
   czyta się natychmiast.
   -------------------------------------------------------------------------- */
.lf-lang > ul {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lf-lang--lista > ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }

.lf-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid transparent;
	color: inherit;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-decoration: none;
	opacity: 0.62;
	transition: opacity var(--lf-dur-fast) var(--lf-ease), border-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-lang__item:hover,
.lf-lang__item:focus-visible { opacity: 1; }
.lf-lang__item.is-current { opacity: 1; border-color: var(--lf-line); }

.lf-flaga {
	flex: 0 0 auto;
	width: 22px;
	height: 15px;
	border-radius: 1px;
	/* Cienka obwódka trzyma białe pola flagi (Polska, Anglia) na jasnym tle -
	   bez niej flaga rozlewa się w kremowy nagłówek. */
	box-shadow: 0 0 0 1px rgba(23, 18, 16, 0.16);
}
.lf-hero--dark .lf-flaga,
.lf-footer .lf-flaga,
.lf-drawer .lf-flaga { box-shadow: 0 0 0 1px rgba(243, 239, 233, 0.28); }

.lf-lang__kod { letter-spacing: 0.14em; }
.lf-lang__nazwa { color: var(--lf-muted); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: none; }

/* W menu głównym przełącznik jest ostatnią pozycją, oddzieloną włoskową
   kreską - inaczej czytałby się jak kolejna zakładka serwisu. */
.lf-nav__lang {
	display: flex;
	align-items: center;
	margin-left: 0.35rem;
	padding-left: 0.85rem;
	border-left: 1px solid var(--lf-line);
}
.lf-nav__lang::after { display: none !important; }
@media (max-width: 1024px) { .lf-nav__lang { display: none; } }

.lf-drawer__lang { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lf-line); }
.lf-drawer__lang .lf-lang__item { padding: 0.6rem 0; font-size: 0.8rem; }

/* --- Przycisk motywu na stronach sklepu --------------------------------- */
/*
 * WooCommerce nadaje swojemu .button wlasny promien, padding i - co gorsza -
 * overflow: visible. Ostatnie psuje wypelnienie .lf-btn, ktore wjezdza od
 * dolu: nieprzyciete zostaje widoczne pod przyciskiem jako druga, brazowa
 * kostka. Regula wtyczki ma dwie klasy, wiec zeby ja przebic, motyw tez
 * musi tu wystapic z dwiema.
 */
.woocommerce .lf-btn,
.woocommerce a.button.lf-btn,
.woocommerce button.button.lf-btn,
.woocommerce input.button.lf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	overflow: hidden;
	border-radius: 999px;
	padding: 1.05rem 2rem;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	min-height: 48px;
}
.woocommerce .lf-btn--small,
.woocommerce a.button.lf-btn--small,
.woocommerce button.button.lf-btn--small {
	padding: 0.8rem 1.4rem;
	font-size: 0.75rem;
}
.woocommerce .lf-btn:hover,
.woocommerce a.button.lf-btn:hover,
.woocommerce button.button.lf-btn:hover { background: var(--btn-bg); color: var(--lf-white); }

/* --- Przełącznik języka wewnątrz menu ----------------------------------- */
/*
 * Przełącznik jest zagnieżdżoną listą w pozycji menu, więc łapią go reguły
 * podmenu: pionowy układ, odstęp między pozycjami i podkreślenie linku.
 * Tutaj je zdejmujemy - flaga i skrót mają stać obok siebie.
 */
.lf-nav__lang .lf-lang > ul { gap: 0.15rem; }
.lf-nav__lang .lf-lang a {
	display: inline-flex;
	padding: 0.4rem 0.5rem;
	white-space: nowrap;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
}
.lf-nav__lang .lf-lang a::after { display: none; }
.lf-nav__lang .lf-lang li { position: relative; }

.lf-drawer__lang .lf-lang a { display: inline-flex; }
.lf-drawer__lang .lf-lang a::after { display: none; }

/* --- Przełącznik jako lista rozwijana ----------------------------------- */
/*
 * Przycisk pokazuje tylko język bieżący; pozostałe wysuwają się pod nim
 * w takim samym panelu jak podmenu nawigacji. Otwiera go najechanie, fokus
 * klawiatury albo kliknięcie (klasa is-open z theme.js).
 */
.lf-lang--rozwijane { position: relative; }
.lf-lang__przycisk {
	margin: 0;
	background: none;
	font-family: inherit;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 1;
}
.lf-lang__strzalka {
	width: 5px;
	height: 5px;
	margin: -3px 0 0 0.1rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
	transition: transform var(--lf-dur-fast) var(--lf-ease);
}

.lf-lang--rozwijane > .lf-lang__lista {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 180px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--lf-cream);
	border: 1px solid var(--lf-line-soft);
	box-shadow: var(--lf-shadow);
	color: var(--lf-text);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--lf-dur-fast) var(--lf-ease),
		transform var(--lf-dur-fast) var(--lf-ease),
		visibility var(--lf-dur-fast);
}
/* Most nad szczeliną między przyciskiem a panelem - bez niego kursor
   w drodze do listy gubi :hover i panel zamyka się pod ręką. */
.lf-lang--rozwijane > .lf-lang__lista::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 100%;
	height: 0.6rem;
}
.lf-lang--rozwijane:not(.is-dismissed):hover > .lf-lang__lista,
.lf-lang--rozwijane:not(.is-dismissed):focus-within > .lf-lang__lista,
.lf-lang--rozwijane.is-open > .lf-lang__lista { opacity: 1; visibility: visible; transform: translateY(0); }
.lf-lang--rozwijane:not(.is-dismissed):hover .lf-lang__strzalka,
.lf-lang--rozwijane:not(.is-dismissed):focus-within .lf-lang__strzalka,
.lf-lang--rozwijane.is-open .lf-lang__strzalka { transform: translateY(2px) rotate(225deg); }

.lf-lang--rozwijane .lf-lang__lista li { margin: 0; }
.lf-nav .lf-lang--rozwijane .lf-lang__lista a,
.lf-lang--rozwijane .lf-lang__lista a {
	display: flex;
	gap: 0.65rem;
	width: 100%;
	padding: 0.6rem 1.1rem;
	border: 0;
	color: inherit;
	font-size: 0.72rem;
	opacity: 1;
	transition: background-color var(--lf-dur-fast) var(--lf-ease);
}
.lf-lang--rozwijane .lf-lang__lista a::after { display: none; }
.lf-lang--rozwijane .lf-lang__lista a:hover,
.lf-lang--rozwijane .lf-lang__lista a:focus-visible,
.lf-lang--rozwijane .lf-lang__lista a.is-current { background: var(--lf-sand); }
.lf-lang--rozwijane .lf-lang__nazwa { margin-left: auto; padding-left: 0.75rem; }
.lf-lang--rozwijane .lf-lang__lista .lf-flaga { box-shadow: 0 0 0 1px rgba(23, 18, 16, 0.16); }

/* Karta produktu zaczyna sie od razu tresci - bez naglowka podstrony musi
   sama zrobic miejsce pod przyklejonym naglowkiem serwisu. */
.single-product .lf-woo { padding-top: clamp(7rem, 11vw, 10rem); }
.single-product .lf-woo > .lf-container > .lf-breadcrumbs { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* --------------------------------------------------------------------------
   43. Tło sekcji: gradient i znak wodny
   --------------------------------------------------------------------------
   Jasne sekcje nie mają płaskiego koloru: na kolor z Elementora (krem albo
   piasek) kładziemy półprzezroczysty gradient - rozświetlenie z lewej góry
   i ciepłe przyciemnienie w prawym dole - więc każda sekcja zachowuje swój
   ton, a tylko nabiera głębi. Tło ustawione ręcznie w Elementorze ma wyższą
   specyficzność i wygrywa, więc nic tu nie nadpisuje świadomej decyzji.

   W tle leży znak LF z logo jako znak wodny. Sekcje ciemne i zdjęciowe
   (hero, film, wezwanie do działania) są pominięte - na zdjęciu znak byłby
   brudem, a ciemne sekcje mają własny, jaśniejszy wariant.
   -------------------------------------------------------------------------- */
.lf-main .e-con.e-parent:not(.lf-section--dark):not(:has(.lf-hero, .lf-video, .lf-cta)),
.lf-main .lf-section:not(.lf-section--dark):not(.lf-cta) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-image:
		radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%, rgba(164, 138, 88, 0.09) 100%);
}

.lf-main .e-con.e-parent:not(.lf-section--dark):not(:has(.lf-hero, .lf-video, .lf-cta))::after,
.lf-main .lf-section:not(.lf-section--dark):not(.lf-cta)::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 6%;
	z-index: -1;
	width: clamp(260px, 34vw, 560px);
	aspect-ratio: 600 / 524;
	background: url("../img/znak-lf.webp") center / contain no-repeat;
	opacity: 0.085;
	pointer-events: none;
}
/* Co druga sekcja: znak po drugiej stronie, żeby nie stał w tym samym
   miejscu przez całą stronę. Zostaje na dole -
   u góry wchodził pod nagłówek sekcji i zamulał tytuł. */
.lf-main .e-con.e-parent:nth-child(even):not(.lf-section--dark):not(:has(.lf-hero, .lf-video, .lf-cta))::after {
	right: auto;
	left: 3%;
}

/* Pasek z logotypami marek jest za niski na znak - wychodzilby poza
   sekcje i konkurowal z nazwami, ktore pasek ma pokazac. */
.lf-main .e-con.e-parent:has(.lf-logos)::after { display: none; }

/* Na piasku kontrast jest mniejszy, więc znak może być o włos mocniejszy. */
.lf-main .lf-section--sand::after { opacity: 0.1; }

@media (max-width: 799px) {
	.lf-main .e-con.e-parent:not(.lf-section--dark):not(:has(.lf-hero, .lf-video, .lf-cta))::after,
	.lf-main .lf-section:not(.lf-section--dark):not(.lf-cta)::after { width: 78vw; opacity: 0.06; }
}

/* --------------------------------------------------------------------------
   44. Poprawki klientki (październik 2026)
   --------------------------------------------------------------------------
   Ciemne sekcje, nowe uklady opinii i FAQ, logotypy partnerow, galeria
   realizacji i strona kategorii. Wszystko na tokenach z sekcji 1.
   -------------------------------------------------------------------------- */
:root {
	/*
	 * Ciemne tlo sekcji (Nasze podejscie, FAQ, Trzy rzeczy). Ton z tej samej
	 * rodziny co tusz w hero, ale o stopien jasniejszy i cieplejszy - przy
	 * czystym tuszu ciemna sekcja zlewala sie z hero i wygladala jak dziura.
	 * Drugi ton sluzy kartom lezacym na ciemnym tle.
	 */
	--lf-dark: #1e1a17;
	--lf-dark-2: #29231f;
}

/* Ciemna sekcja - klasa nadawana kontenerowi w Elementorze (Zaawansowane ->
   Klasy CSS) albo sekcji w szablonie. */
.lf-section--dark,
.e-con.lf-section--dark { background-color: var(--lf-dark); color: rgba(243, 239, 233, 0.74); }
.e-con.lf-section--dark {
	--lf-clay: var(--lf-gold-light);
	--lf-heading: var(--lf-cream);
	--lf-line: rgba(243, 239, 233, 0.16);
	--lf-line-soft: rgba(243, 239, 233, 0.1);
	--lf-muted: #a09589;
	--lf-text: rgba(243, 239, 233, 0.74);
}
.lf-section--dark .lf-lead,
.lf-section--dark .lf-feature__text,
.lf-section--dark .lf-faq__answer { color: rgba(243, 239, 233, 0.74); }
.lf-section--dark .lf-link { color: var(--lf-cream); }
.lf-section--dark .lf-link:hover { color: var(--lf-gold-light); }
.lf-section--dark .lf-btn { --btn-bg: var(--lf-cream); --btn-fg: var(--lf-ink); }
.lf-section--dark .lf-btn:hover,
.lf-section--dark .lf-btn:focus-visible { color: var(--lf-ink); }
.lf-section--dark .lf-btn--ghost { --btn-bg: transparent; --btn-fg: var(--lf-cream); border-color: rgba(243, 239, 233, 0.45); }
.lf-section--dark .lf-faq__question { color: var(--lf-cream); }
.lf-section--dark .lf-faq__question:hover { color: var(--lf-gold-light); }
.lf-section--dark .lf-feature { border-color: var(--lf-line); }

/* Znak wodny na ciemnym: ten sam znak LF, jasniejszy i rzadszy. */
.lf-main .e-con.e-parent.lf-section--dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.lf-main .e-con.e-parent.lf-section--dark::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 6%;
	z-index: 0;
	width: clamp(240px, 30vw, 480px);
	aspect-ratio: 600 / 524;
	background: url("../img/znak-lf.webp") center / contain no-repeat;
	opacity: 0.07;
	pointer-events: none;
}
.lf-main .e-con.e-parent.lf-section--dark > * { position: relative; z-index: 1; }

/* Sekcja z pelnym logo w tle (Nasze podejscie): logo pionowe, wieksze. */
.lf-main .e-con.e-parent.lf-sekcja-logo::after {
	top: auto;
	bottom: -4%;
	right: -2%;
	width: clamp(240px, 30vw, 460px);
	aspect-ratio: 1308 / 864;
	background-image: url("../img/logo-pion.webp");
	opacity: 0.09;
}
@media (max-width: 799px) {
	.lf-main .e-con.e-parent.lf-section--dark::after { width: 70vw; opacity: 0.05; }
	.lf-main .e-con.e-parent.lf-sekcja-logo::after { bottom: 2%; opacity: 0.07; }
}

/* Loga i sklep maja wspolne tlo - sklep jest dalszym ciagiem paska marek,
   bez linii i bez drugiego znaku wodnego pomiedzy. */
.lf-main .e-con.e-parent.lf-tlo-ciagle {
	background-color: var(--lf-bg);
	background-image: linear-gradient(180deg, rgba(232, 224, 213, 0.55) 0%, rgba(243, 239, 233, 0) 70%);
}
.lf-main .e-con.e-parent.lf-tlo-ciagle + .e-con.e-parent.lf-tlo-ciagle {
	background-image: linear-gradient(0deg, rgba(232, 224, 213, 0.55) 0%, rgba(243, 239, 233, 0) 70%);
	padding-top: 0;
}
.lf-tlo-ciagle .lf-logos { border-bottom: 0; }

/* Logotypy partnerow: jednolite, stonowane, o wyrownanej wadze. Wysokosc
   kazdego liczy widget z proporcji pliku (--lf-logo-h). */
.lf-logos__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.75rem, 4vw, 3.75rem) clamp(2rem, 5vw, 4.5rem); }
.lf-logos__item { flex: none; min-height: 56px; }
.lf-logos__item img {
	height: var(--lf-logo-h, 30px);
	max-height: none;
	width: auto;
	opacity: 0.62;
	filter: grayscale(1) contrast(1.05);
	mix-blend-mode: multiply;
}
.lf-logos__label { max-width: 46ch; margin-inline: auto; line-height: 1.7; }
@media (max-width: 599px) { .lf-logos__item img { height: calc(var(--lf-logo-h, 30px) * 0.82); } }

/* Wyroznik dystrybutora nad logotypami: nazwa marek wieksza, kraje drobno
   jak eyebrow, a dotychczasowy napis schodzi o stopien nizej. */
.lf-logos__head { max-width: 34ch; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.lf-logos__title { margin: 0; font-size: var(--lf-fs-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; color: var(--lf-heading); text-wrap: balance; }
.lf-logos__subtitle { margin: 0.85rem 0 0; color: var(--lf-brown); font-size: var(--lf-fs-eyebrow); letter-spacing: var(--lf-ls-eyebrow); text-transform: uppercase; }
.lf-logos__head + .lf-logos__label { margin-bottom: 1.75rem; font-size: 0.68rem; }

/* Odznaka w rogu gabloty hero ma teraz dwuwyrazowy podpis ("280+
   zrealizowanych wnetrz", "ferdigstilte rom"). Kolo jest troche wieksze,
   a podpis drobniejszy i luzniej rozstawiony w pionie. */
.lf-hgal__badge { width: 132px; height: 132px; left: -3.75rem; }
.lf-hgal__badge > span { max-width: 104px; padding-inline: 8px; font-size: 0.56rem; letter-spacing: 0.1em; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }

/* Opinie: wyrozniony cytat nad siatka krotszych opinii. */
.lf-opinie__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.lf-opinia-glowna {
	position: relative;
	margin: 0;
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
	overflow: hidden;
	background: var(--lf-white);
	border: 1px solid var(--lf-line-soft);
	isolation: isolate;
}
.lf-opinia-glowna__logo {
	position: absolute;
	top: 50%;
	right: clamp(-3rem, -2vw, -1rem);
	z-index: -1;
	width: clamp(180px, 30vw, 380px);
	opacity: 0.09;
	transform: translateY(-50%) rotate(-6deg);
	filter: grayscale(0.2);
}
.lf-opinia-glowna__logo img { width: 100%; height: auto; }
.lf-opinia-glowna__cudzyslow {
	display: block;
	height: 0.55em;
	color: var(--lf-gold);
	font-size: clamp(4rem, 3rem + 4vw, 7rem);
	line-height: 1;
}
.lf-opinia-glowna__tresc {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 62ch;
	color: var(--lf-heading);
	font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.35rem);
	line-height: 1.65;
	letter-spacing: -0.005em;
}
.lf-opinia-glowna__autor { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--lf-line); max-width: 62ch; }
.lf-opinia-glowna__autor .lf-testimonial__name { font-size: 1.05rem; }

.lf-opinie__siatka {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	columns: 1;
	column-gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 700px) { .lf-opinie__siatka { columns: 2; } }
@media (min-width: 1100px) { .lf-opinie__siatka { columns: 3; } }
.lf-opinia {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	padding: clamp(1.4rem, 2.5vw, 2rem);
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--lf-line-soft);
	break-inside: avoid;
}
.lf-opinia__tresc { margin: 0; padding: 0; border: 0; color: var(--lf-text); font-size: 0.97rem; line-height: 1.7; }
.lf-opinia__tresc p { margin-bottom: 0.8em; }
.lf-opinia__autor { display: flex; align-items: center; gap: 0.85rem; padding-top: 1rem; border-top: 1px solid var(--lf-line-soft); }

/* FAQ: blok pod lista pytan. */
.lf-faq__outro {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--lf-line);
}
@media (min-width: 800px) { .lf-faq__outro { grid-template-columns: 1fr auto; } }
.lf-faq__outro-title { margin: 0 0 0.4rem; font-size: var(--lf-fs-h4); }
.lf-faq__outro-text { margin: 0; max-width: 56ch; }
.lf-section--dark .lf-faq__outro { background: var(--lf-dark-2); }

/* Wezwanie do dzialania: dopisek o zasiegu i dostawie. */
.lf-cta__note {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(243, 239, 233, 0.18);
	max-width: 52ch;
	font-size: 0.92rem;
	line-height: 1.7;
}
.lf-cta__note p { margin-bottom: 0.6em; }

/* Formularz: dopisek przy polu nieobowiazkowym. */
.lf-form__opt { color: var(--lf-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lf-form textarea[rows="4"] { min-height: 7rem; }

/* Galeria realizacji - kolumny, zdjecia w naturalnych proporcjach. */
.lf-realizacja-galeria { columns: 1; column-gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 700px) { .lf-realizacja-galeria { columns: 2; } }
@media (min-width: 1100px) { .lf-realizacja-galeria { columns: 3; } }
.lf-realizacja-galeria__item { margin: 0 0 1rem; break-inside: avoid; }
.lf-realizacja-galeria__item img { width: 100%; height: auto; }

/* Strona kategorii realizacji. */
.lf-kategoria { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .lf-kategoria { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.lf-kategoria__media img { width: 100%; height: auto; }
.lf-kategoria__opis > * { max-width: 62ch; margin-inline: 0; }
.lf-kategoria__lista { margin: clamp(3.5rem, 7vw, 6rem) 0 2rem; font-size: var(--lf-fs-h3); }
.lf-tags a.is-current { background: var(--lf-ink); color: var(--lf-cream); border-color: var(--lf-ink); }

/* Karty kategorii na stronie glownej: cztery w dwoch rzedach. */
@media (min-width: 700px) { .lf-projects--kategorie .lf-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dokumenty prawne: notka o projekcie. */
.lf-draft-note {
	padding: 0.85rem 1.1rem;
	border: 1px dashed var(--lf-clay);
	background: rgba(164, 138, 88, 0.08);
	color: var(--lf-clay-dark);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Brakujace dane (placeholder do uzupelnienia przez klientke). */
.lf-brak { padding: 0 0.3em; background: rgba(164, 138, 88, 0.18); }

/* Stopka na ciemnym tle: tekst z edytora Elementora dostaje kolor z zestawu
   (ciemny) - tutaj przestawiamy go na jasny. */
.lf-stopka .elementor-widget-text-editor,
.lf-stopka .elementor-widget-text-editor p { color: rgba(243, 239, 233, 0.7); }
.lf-stopka .lf-stopka__podtytul strong { color: var(--lf-cream); font-weight: 500; }
.lf-stopka .lf-haslo { color: var(--lf-gold-light); letter-spacing: 0.04em; }
.lf-stopka .lf-stopka__zasieg { font-size: 0.88rem; line-height: 1.65; }
.lf-stopka .lf-stopka__copy { margin: 0; font-size: 0.82rem; color: rgba(243, 239, 233, 0.55); }
.lf-stopka .elementor-widget-text-editor p { margin-bottom: 0.9em; }

/* Haslo "Mer enn flis." w tresci realizacji. */
.lf-haslo { color: var(--lf-clay); font-weight: 500; letter-spacing: 0.02em; }
.lf-kasa-uwaga { margin: 0 0 1rem; padding: 0.85rem 1rem; border-left: 2px solid var(--lf-clay); background: rgba(164, 138, 88, 0.08); font-size: 0.9rem; }

/* Linki prawne w stopce zostaja widoczne na telefonie - menu poziome jest
   tam domyslnie ukryte (zastepuje je przycisk menu w naglowku). */
@media (max-width: 1024px) {
	.lf-stopka .lf-nav { display: block; }
	.lf-stopka .lf-nav ul { flex-wrap: wrap; gap: 0.4rem 1.25rem; }
}
.lf-stopka__dol .lf-nav a { color: rgba(243, 239, 233, 0.7); }

/* Naglowek podstrony na zdjeciu: wyroznienie w naglowku w jasnym zlocie,
   ciemne zloto na przyciemnionym zdjeciu bylo nieczytelne. */
.lf-naglowek-strony { --lf-clay: var(--lf-gold-light); }
.lf-naglowek-strony .lf-heading-widget__title em { color: var(--lf-gold-light); }
/* Na stronie kasy WooCommerce powieksza wszystkie h3 - stopka ma zostac jak wszedzie. */
.woocommerce-checkout .lf-stopka h3.lf-footer__col-title { font-size: var(--lf-fs-eyebrow); }

/* ---------------------------------------------------------------------------
   Sklep: filtry rodzajow i marek (inc/woocommerce-filtry.php)
   ------------------------------------------------------------------------- */
.lf-filtry {
	display: grid;
	gap: 0.9rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid var(--lf-line-soft);
}
.lf-filtry__wiersz { display: grid; gap: 0.55rem; min-width: 0; }
.lf-filtry__etykieta {
	color: var(--lf-muted);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.lf-filtry .lf-tags a { white-space: nowrap; }
.lf-filtry .lf-tags a.is-current { background: var(--lf-ink); color: var(--lf-cream); border-color: var(--lf-ink); }
@media (min-width: 900px) {
	.lf-filtry__wiersz { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
	.lf-filtry__etykieta { padding-top: 0.5rem; }
}
/* Na telefonie pigulki przewijaja sie w poziomie zamiast zajmowac pol ekranu. */
@media (max-width: 899px) {
	.lf-filtry .lf-tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: -20px;
		padding-inline: 20px;
		scroll-padding-inline: 20px;
	}
	.lf-filtry .lf-tags::-webkit-scrollbar { display: none; }
	.lf-filtry .lf-tags a { flex: none; }
}
.lf-siatka__marka { display: block; margin-bottom: 0.35rem; }

/* Menu "Sklep": rodzaje i marki w dwoch kolumnach */
@media (min-width: 1024px) {
	.lf-nav .lf-menu-sklep > .sub-menu { columns: 2; column-gap: 0; min-width: 520px; }
	.lf-nav .lf-menu-sklep > .sub-menu > li { break-inside: avoid; }
	.lf-nav .lf-menu-sklep > .sub-menu > .lf-menu-naglowek { break-before: column; }
}
.lf-nav .lf-menu-naglowek > a,
.lf-drawer .lf-menu-naglowek > a {
	color: var(--lf-muted);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.lf-drawer .lf-menu-naglowek { margin-top: 0.75rem; }