/* Lutniczy Outlet — wykończenia motywu */

:root {
	--lo-kawa: var(--wp--preset--color--kawa);
	--lo-zloto: var(--wp--preset--color--zloto);
	--lo-zloto-c: var(--wp--preset--color--zloto-ciemne);
	--lo-szampan: var(--wp--preset--color--szampan);
	--lo-piasek: var(--wp--preset--color--piasek);
	--lo-przyg: var(--wp--preset--color--przygaszony);
	--lo-przyg-j: var(--wp--preset--color--przygaszony-jasny);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
::selection { background: var(--lo-zloto); color: var(--wp--preset--color--heban); }

/* ---------- Sekcje ---------- */
.lo-sekcja { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.lo-alabaster { background: var(--wp--preset--color--alabaster); }
.lo-pergamin { background: var(--wp--preset--color--pergamin); }

/* Etykieta nad tytułem + złota kreska */
.lo-etykieta {
	font-size: 12px !important; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
	color: var(--lo-przyg); margin-bottom: 4px !important; line-height: 1.5;
}
.lo-etykieta::after { content: ""; display: block; width: 56px; height: 1px; background: var(--lo-zloto-c); margin-top: 14px; }
.has-text-align-center.lo-etykieta::after, .lo-srodek .lo-etykieta::after { margin-left: auto; margin-right: auto; }

.lo-tytul em, h1 em, h2 em { font-style: italic; color: var(--lo-zloto-c); }

/* ---------- Ciemne sekcje (kawa) ---------- */
.lo-ciemna { background: var(--lo-kawa); color: var(--lo-szampan); }
.lo-ciemna h1, .lo-ciemna h2, .lo-ciemna h3 { color: var(--wp--preset--color--kosc); }
.lo-ciemna h1 em, .lo-ciemna h2 em { color: var(--lo-zloto); }
.lo-ciemna a:not(.wp-element-button) { color: var(--lo-zloto); }
.lo-ciemna .lo-etykieta { color: var(--lo-przyg-j); }
.lo-ciemna .lo-etykieta::after { background: var(--lo-zloto); }
.lo-ciemna .wp-element-button, .lo-ciemna .wp-block-button__link {
	color: var(--lo-szampan) !important; border-color: var(--lo-zloto) !important; background: transparent !important;
}
.lo-ciemna .wp-element-button:hover, .lo-ciemna .wp-block-button__link:hover {
	background: var(--lo-zloto) !important; color: var(--wp--preset--color--heban) !important;
}
.lo-ciemna .is-style-outline-lekki .wp-block-button__link { border-color: rgba(201,168,124,.45) !important; }

.wp-element-button, .wp-block-button__link { transition: background-color .45s ease, color .45s ease; }

/* ---------- Pasek górny i nagłówek ---------- */
.lo-pasek { background: var(--wp--preset--color--espresso); color: var(--lo-szampan); font-size: 13px; letter-spacing: .06em; }
.lo-pasek p { margin: 0; }
.lo-pasek a { color: var(--lo-zloto); text-decoration: none; }
.lo-naglowek { background: var(--lo-kawa); color: var(--lo-szampan); border-bottom: 1px solid rgba(201,168,124,.22); }
.lo-naglowek .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--bona-nova); letter-spacing: .2em; text-transform: uppercase; font-size: 23px; line-height: 1.1; }
.lo-naglowek .wp-block-site-title a { color: var(--lo-zloto); text-decoration: none; }
.lo-naglowek .wp-block-site-tagline { margin: 2px 0 0; font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: var(--lo-przyg-j); }
.lo-naglowek .wp-block-navigation a { color: var(--lo-szampan); text-decoration: none; padding: 10px 0; }
.lo-naglowek .wp-block-navigation a:hover { color: var(--lo-zloto); }
.lo-naglowek .wp-block-navigation__responsive-container.is-menu-open { background: var(--lo-kawa) !important; color: var(--lo-szampan) !important; }
.lo-naglowek .wp-block-navigation__responsive-container-open, .lo-naglowek .wp-block-navigation__responsive-container-close { color: var(--lo-zloto); }
.lo-naglowek .wc-block-mini-cart__button, .lo-naglowek .wp-block-search__button { color: var(--lo-zloto) !important; background: transparent !important; border: 1px solid rgba(201,168,124,.45) !important; min-width: 44px; min-height: 44px; }
.lo-naglowek .wc-block-mini-cart__badge { background: var(--lo-zloto); color: var(--wp--preset--color--heban); }

/* ---------- Hero ---------- */
.lo-hero h1 { color: var(--wp--preset--color--kosc); }
.lo-hero .lo-wstep { font-size: clamp(17px, 1.6vw, 19px); max-width: 540px; }

/* ---------- Miejsca na grafiki ---------- */
.lo-grafika {
	position: relative; margin: 0; width: 100%; overflow: hidden;
	background: radial-gradient(ellipse at 50% 40%, #FBF9F5 0%, var(--wp--preset--color--piasek) 85%);
	color: #CDBFA6; display: flex; align-items: center; justify-content: center;
}
.lo-grafika--ciemna { background: radial-gradient(ellipse at 45% 38%, var(--wp--preset--color--poswiata) 0%, var(--lo-kawa) 75%); color: rgba(201,168,124,.55); border: 1px solid rgba(201,168,124,.28); }
.lo-grafika__gitara { width: 22%; max-width: 150px; height: auto; }
.lo-grafika--obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lo-grafika__info {
	position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px;
	background: rgba(247,244,239,.92); color: var(--wp--preset--color--atrament); padding: 12px 14px; font-size: 12px; line-height: 1.5; text-align: left;
}
.lo-grafika__info strong { font-size: 11px; letter-spacing: .18em; color: var(--lo-zloto-c); font-weight: 500; }
.lo-grafika__info span { font-style: italic; }
.lo-grafika__info em { font-style: normal; font-size: 10px; color: var(--lo-przyg); }
.lo-grafika--ciemna .lo-grafika__info { background: rgba(43,33,26,.88); color: var(--lo-szampan); }
.lo-grafika--ciemna .lo-grafika__info strong { color: var(--lo-zloto); }
.lo-grafika--ciemna .lo-grafika__info em { color: var(--lo-przyg-j); }

/* ---------- Karty gitar ---------- */
.lo-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.lo-karta { background: #fff; border: 1px solid var(--lo-piasek); display: flex; flex-direction: column; }
.lo-karta__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; background: #FBF9F5; border-bottom: 1px solid var(--wp--preset--color--pergamin); overflow: hidden; color: #CDBFA6; }
.lo-karta__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s ease; }
.lo-karta:hover .lo-karta__foto img { transform: scale(1.03); }
.lo-karta__gitara { width: 26%; height: auto; }
.lo-karta__tresc { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.lo-karta__rodzaj { margin: 0; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--lo-przyg); font-weight: 500; }
.lo-karta__nazwa { margin: 0; font-size: 30px; line-height: 1.15; }
.lo-karta__nazwa a { color: inherit; text-decoration: none; }
.lo-karta__opis { margin: 0; font-size: 16px; line-height: 1.65; color: var(--lo-przyg); }
.lo-karta__dol { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--pergamin); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lo-karta__cena { font-size: 22px; font-weight: 500; }
.lo-karta__cena del { font-size: 15px; color: #8C8174; font-weight: 400; margin-right: 6px; }
.lo-karta__cena ins { text-decoration: none; }
.lo-karta__status { font-size: 12px; letter-spacing: .08em; color: var(--wp--preset--color--dostepna); }
.lo-karta__status.is-zamowienie { color: var(--wp--preset--color--na-zamowienie); }
.lo-przycisk {
	display: block; text-align: center; margin-top: 6px; border: 1px solid var(--lo-zloto-c); color: var(--lo-zloto-c) !important;
	text-decoration: none; padding: 16px 20px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
	transition: background-color .45s ease, color .45s ease;
}
.lo-przycisk:hover { background: var(--lo-zloto-c); color: var(--wp--preset--color--alabaster) !important; }
.lo-pusto { font-size: 18px; color: var(--lo-przyg); }

/* ---------- Powody (siatka z liniami) ---------- */
.lo-powody { border-top: 1px solid var(--lo-piasek); }
.lo-powody > .wp-block-column { border-bottom: 1px solid var(--lo-piasek); padding: 32px 0; }
.lo-liczba { font-family: var(--wp--preset--font-family--bona-nova); font-size: 40px !important; line-height: 1 !important; color: var(--lo-zloto-c); margin-bottom: 6px !important; }
.lo-powody h3 { font-family: var(--wp--preset--font-family--jost); font-size: 19px; font-weight: 500; }
.lo-powody p:not(.lo-liczba) { font-size: 16px; color: var(--lo-przyg); }

/* ---------- Kroki ---------- */
.lo-krok { background: var(--wp--preset--color--alabaster); padding: 40px 34px !important; }
.lo-krok .lo-liczba { font-size: 52px !important; }
.lo-krok p:not(.lo-liczba) { font-size: 16px; color: var(--lo-przyg); }

/* ---------- Poradniki (pętla wpisów) ---------- */
.lo-poradniki .wp-block-post-featured-image { margin: 0 0 16px; background: var(--lo-piasek); aspect-ratio: 16/10; overflow: hidden; }
.lo-poradniki .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.lo-poradniki .wp-block-post-title { font-size: 27px; line-height: 1.22; }
.lo-poradniki .wp-block-post-title a { color: inherit; text-decoration: none; }
.lo-poradniki .wp-block-post-title a:hover { color: var(--lo-zloto-c); }

/* ---------- Formularz ---------- */
.lo-formularz { display: flex; flex-direction: column; gap: 4px; }
.lo-formularz p { margin: 0 0 12px; }
.lo-formularz label { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lo-przyg-j); margin-bottom: 8px; }
.lo-formularz label span { letter-spacing: .05em; text-transform: none; }
.lo-formularz input[type=text], .lo-formularz input[type=email], .lo-formularz input[type=tel], .lo-formularz textarea {
	width: 100%; box-sizing: border-box; background: var(--wp--preset--color--alabaster); border: 1px solid var(--lo-zloto);
	padding: 14px 16px; font: inherit; font-size: 17px; color: var(--wp--preset--color--atrament); border-radius: 0;
}
.lo-formularz input:focus, .lo-formularz textarea:focus { outline: 2px solid var(--lo-zloto); outline-offset: 2px; }
.lo-formularz__zgoda label { text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.6; color: var(--lo-szampan); display: flex; gap: 10px; align-items: flex-start; }
.lo-formularz__zgoda input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--lo-zloto); }
.lo-formularz__pulapka { position: absolute !important; left: -9999px; }
.lo-formularz__info { padding: 14px 16px; border: 1px solid var(--lo-zloto); color: var(--lo-szampan); }
.lo-formularz__info.is-blad { border-color: #C77; }
.lo-formularz button { cursor: pointer; }
.lo-kontakt-tel a { font-family: var(--wp--preset--font-family--bona-nova); font-size: 30px; text-decoration: none; }

/* ---------- Stopka ---------- */
.lo-stopka { background: var(--wp--preset--color--espresso); color: var(--lo-przyg-j); font-size: 15px; }
.lo-stopka a { color: var(--lo-szampan); text-decoration: none; }
.lo-stopka a:hover { color: var(--lo-zloto); }
.lo-stopka .lo-znak { font-family: var(--wp--preset--font-family--bona-nova); font-size: 22px; letter-spacing: .2em; color: var(--lo-zloto); margin: 0; }
.lo-stopka .lo-tytulik { font-size: 11px; letter-spacing: .26em; color: var(--lo-zloto); text-transform: uppercase; margin-bottom: 4px; }
.lo-stopka .lo-dol { border-top: 1px solid rgba(201,168,124,.2); font-size: 13px; }

/* ---------- Treść stron i wpisów ---------- */
.lo-tresc h2 { margin-top: 1.6em; }
.lo-tresc img { max-width: 100%; }
.wp-block-post-content a { text-underline-offset: 3px; }

/* ---------- WooCommerce: drobne wyrównania ---------- */
.woocommerce .price, .wc-block-components-product-price { color: var(--wp--preset--color--atrament); }
.woocommerce span.onsale, .wc-block-components-product-sale-badge { background: var(--wp--preset--color--kawa); color: var(--lo-szampan); border: 0; border-radius: 0; }
.wp-block-woocommerce-product-image-gallery, .woocommerce-product-gallery { background: #FBF9F5; }

/* ---------- Dostępność ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--lo-zloto-c); outline-offset: 3px; }
.lo-ciemna a:focus-visible, .lo-ciemna button:focus-visible { outline-color: var(--lo-zloto); }

@media (max-width: 781px) {
	.lo-naglowek .wp-block-site-title { font-size: 19px; }
	.lo-karta__nazwa { font-size: 26px; }
	.wp-element-button, .wp-block-button__link { padding: 17px 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ---------- Układ strony: bez odstępów między nagłówkiem, treścią i stopką ---------- */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; }
main.wp-block-group > * + * { margin-block-start: 0; }
.lo-sekcja > .wp-block-columns { margin-top: 0; margin-bottom: 0; }
.lo-sekcja .wp-block-columns + .wp-block-columns { margin-top: 0; }
.lo-sekcja > * + .wp-block-columns, .lo-sekcja > * + .lo-karty, .lo-sekcja > * + .wp-block-shortcode, .lo-sekcja > * + .wp-block-query { margin-top: 48px; }
.lo-tresc .wp-block-post-title { margin-bottom: 24px; }
.lo-tresc { padding-left: clamp(18px, 4vw, 32px); padding-right: clamp(18px, 4vw, 32px); }

/* ---------- Typografia „jak w jubilerstwie”: prosto, jasno, z oddechem ---------- */
h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title { font-family: var(--wp--preset--font-family--jost); font-weight: 300; }
h1 em, h2 em, h3 em, .lo-tytul em { font-style: normal; }
.lo-hero h1 { letter-spacing: .005em; }
.lo-etykieta { letter-spacing: .3em; }
.lo-liczba { font-family: var(--wp--preset--font-family--jost) !important; font-weight: 300; letter-spacing: .02em; }
.lo-karta__nazwa { font-family: var(--wp--preset--font-family--jost); font-weight: 400; font-size: 22px; letter-spacing: .02em; }
.lo-karta__cena { font-weight: 400; letter-spacing: .02em; }
.lo-poradniki .wp-block-post-title { font-size: 22px; font-weight: 400; }
.lo-krok h3, .lo-powody h3 { font-weight: 400; }
.lo-naglowek .wp-block-navigation a { padding: 12px 0; }
.lo-kontakt-tel a { font-family: var(--wp--preset--font-family--jost); font-weight: 300; font-size: 28px; letter-spacing: .04em; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.lo-liczba em, p em { font-style: normal; }
.lo-sekcja > .wp-block-group.lo-srodek { text-align: center; }

/* ==================================================================
   WYKOŃCZENIA 1.0.3 — szczegóły w duchu stron nagradzanych
   (oprawa zdjęć, przyciski, przejścia między sekcjami, ruch)
   ================================================================== */
:root { --lo-krzywa: cubic-bezier(.2, .7, .2, 1); }

/* --- Oprawa zdjęć: passe-partout, złota linia, cień warstwowy --- */
.lo-grafika { isolation: isolate; box-shadow: 0 1px 2px rgba(23,17,14,.06), 0 18px 40px -18px rgba(23,17,14,.28), 0 50px 90px -40px rgba(23,17,14,.30); }
.lo-grafika::after {
	content: ""; position: absolute; inset: 14px; border: 1px solid rgba(201,168,124,.55);
	pointer-events: none; z-index: 2; transition: inset .9s var(--lo-krzywa), border-color .9s var(--lo-krzywa);
}
.lo-grafika--obraz::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(23,17,14,.38) 100%);
}
.lo-grafika--obraz img { transition: transform 1.6s var(--lo-krzywa); }
.lo-grafika:hover::after { inset: 20px; border-color: rgba(201,168,124,.85); }
.lo-grafika--obraz:hover img { transform: scale(1.025); }
.lo-ciemna .lo-grafika { box-shadow: 0 0 0 1px rgba(201,168,124,.18), 0 30px 70px -25px rgba(0,0,0,.65), 0 0 120px -30px rgba(201,140,70,.28); border: 0; }
.lo-grafika__info { z-index: 3; }

/* --- Przyciski: wypełnienie płynące od lewej, rozsuwające się litery, strzałka --- */
.wp-block-button__link, .wp-element-button, .lo-przycisk, .lo-formularz button {
	position: relative; overflow: hidden; isolation: isolate;
	transition: color .55s var(--lo-krzywa), letter-spacing .55s var(--lo-krzywa), border-color .55s var(--lo-krzywa) !important;
}
.wp-block-button__link::before, .wp-element-button::before, .lo-przycisk::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--lo-zloto-c); transform: scaleX(0); transform-origin: right center;
	transition: transform .6s var(--lo-krzywa);
}
.wp-block-button__link:hover::before, .wp-element-button:hover::before, .lo-przycisk:hover::before,
.wp-block-button__link:focus-visible::before, .wp-element-button:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.wp-block-button__link:hover, .wp-element-button:hover, .lo-przycisk:hover { background: transparent !important; letter-spacing: .34em; }
.wp-block-button__link::after, .lo-przycisk::after {
	content: "→"; display: inline-block; margin-left: 0; width: 0; opacity: 0; letter-spacing: 0;
	transition: width .55s var(--lo-krzywa), opacity .4s ease, margin .55s var(--lo-krzywa);
}
.wp-block-button__link:hover::after, .lo-przycisk:hover::after { width: 1em; opacity: 1; margin-left: .6em; }
.lo-ciemna .wp-block-button__link::before, .lo-ciemna .wp-element-button::before { background: var(--lo-zloto); }
.lo-ciemna .wp-block-button__link:hover, .lo-ciemna .wp-element-button:hover { background: transparent !important; }
/* --- Karty gitar: uniesienie i złota nić u góry --- */
.lo-karta { position: relative; transition: transform .7s var(--lo-krzywa), box-shadow .7s var(--lo-krzywa), border-color .7s; }
.lo-karta::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--lo-zloto-c); transform: scaleX(0); transition: transform .8s var(--lo-krzywa); z-index: 2; }
.lo-karta:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(23,17,14,.35); border-color: transparent; }
.lo-karta:hover::before { transform: scaleX(1); }

/* --- Linki tekstowe: kreska rysująca się od lewej --- */
.lo-sekcja p a:not(.wp-element-button), .lo-stopka a {
	text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
	transition: background-size .5s var(--lo-krzywa), color .3s;
}
.lo-sekcja p a:not(.wp-element-button) { background-size: 100% 1px; }
.lo-sekcja p a:not(.wp-element-button):hover { background-size: 0% 1px; background-position: 100% 100%; }
.lo-stopka a:hover { background-size: 100% 1px; }

/* --- Przejścia między sekcjami --- */
/* jasne → jasne: włoskowa linia z rombem pośrodku, jak oczko w biżuterii */
.lo-pergamin + .lo-alabaster, .lo-alabaster + .lo-pergamin { position: relative; }
.lo-pergamin + .lo-alabaster::before, .lo-alabaster + .lo-pergamin::before {
	content: ""; position: absolute; top: 0; left: 50%; width: min(240px, 50%); height: 1px; transform: translate(-50%, -0.5px);
	background: linear-gradient(90deg, transparent, rgba(126,95,51,.55) 30%, rgba(126,95,51,.55) 70%, transparent);
}
.lo-pergamin + .lo-alabaster::after, .lo-alabaster + .lo-pergamin::after {
	content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg);
	background: var(--wp--preset--color--alabaster); border: 1px solid rgba(126,95,51,.7);
}
/* ciemne sekcje: ziarno filmu i ciepła poświata */
.lo-ciemna { position: relative; isolation: isolate; }
.lo-ciemna::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 70% at 75% 45%, rgba(110,72,40,.55), transparent 70%);
}
.lo-ciemna::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* łagodne wejście jasnej sekcji po ciemnej i ciemnej po jasnej */
.lo-ciemna + .lo-sekcja:not(.lo-ciemna) { box-shadow: inset 0 18px 30px -24px rgba(23,17,14,.25); }
.lo-naglowek { position: relative; }

/* --- Nagłówek: przyklejony, przy przewijaniu przejrzysty i niższy --- */
header.wp-block-template-part { position: sticky; top: -42px; z-index: 50; }
body.admin-bar header.wp-block-template-part { top: -10px; }
.lo-naglowek { transition: background-color .5s var(--lo-krzywa), padding .5s var(--lo-krzywa), box-shadow .5s; }
header.is-przewiniety .lo-naglowek {
	background: rgba(59,39,25,.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
	padding-top: 10px !important; padding-bottom: 10px !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
}
@media (max-width: 600px) { body.admin-bar header.wp-block-template-part { top: 0; position: relative; } }

/* --- Ruch: wyłanianie się treści (tylko gdy działa skrypt) --- */
.lo-js .lo-wylania { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--lo-krzywa), transform 1.1s var(--lo-krzywa); transition-delay: var(--lo-opoznienie, 0ms); }
.lo-js .lo-wylania.is-widoczne { opacity: 1; transform: none; }
.lo-js .lo-grafika.lo-wylania { transform: none; clip-path: inset(6% 6% 6% 6%); transition: clip-path 1.4s var(--lo-krzywa), opacity 1s var(--lo-krzywa); }
.lo-js .lo-grafika.lo-wylania.is-widoczne { clip-path: inset(0 0 0 0); }
.lo-js .lo-grafika--obraz.lo-wylania img { transform: scale(1.08); }
.lo-js .lo-grafika--obraz.lo-wylania.is-widoczne img { transform: scale(1); }
.lo-js .lo-karta.lo-wylania.is-widoczne:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	.lo-js .lo-wylania { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	header.wp-block-template-part { position: relative; }
}

/* ==================================================================
   1.0.4 — nagłówek ze zdjęciem z oryginału + porządny widok telefonu
   ================================================================== */
.lo-hero-foto {
	min-height: min(78vh, 720px); display: flex; flex-direction: column; justify-content: center;
	background:
		linear-gradient(90deg, #3B2719 0%, rgba(59,39,25,.94) 34%, rgba(59,39,25,.55) 55%, rgba(59,39,25,.08) 78%, rgba(59,39,25,0) 100%),
		url("/wp-content/uploads/2026/08/Lutniczy-Outlet-Hero-1536x689.jpg") right center / cover no-repeat,
		#3B2719;
}
.lo-hero-foto::before { background: none; }
.lo-hero__tresc { max-width: 600px; }
.lo-hero__tresc > * + * { margin-top: 22px; }
.lo-hero-foto::after { opacity: .05; }
/* dolna krawędź nagłówka: miękkie zejście w kawę i złota nić */
.lo-hero-foto { box-shadow: inset 0 -80px 60px -40px rgba(59,39,25,.85); }

/* Zamysł z gitarą */
.lo-pergamin .lo-grafika--ciemna { max-width: 440px; margin-inline: auto; }

/* ---------- Telefon ---------- */
@media (max-width: 781px) {
	/* pasek górny: tylko telefon, jedna linijka */
	.lo-pasek p:first-child { display: none; }
	.lo-pasek .wp-block-group { justify-content: center !important; }
	.lo-pasek { font-size: 12px; }

	/* nagłówek: znak po lewej, koszyk i menu po prawej, w jednym rzędzie */
	.lo-naglowek > .wp-block-group { flex-wrap: nowrap !important; gap: 12px !important; }
	.lo-naglowek .wp-block-site-title { font-size: 16px; letter-spacing: .14em; white-space: nowrap; }
	.lo-naglowek .wp-block-site-tagline { font-size: 8px; letter-spacing: .3em; white-space: nowrap; }
	.lo-naglowek .wp-block-woocommerce-customer-account { display: none; }
	.lo-naglowek .wp-block-navigation { order: 2; }
	.lo-naglowek .wc-block-mini-cart__button { min-width: 40px; min-height: 40px; padding: 8px; }
	.lo-naglowek .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201,168,124,.45); }
	header.wp-block-template-part { top: -33px; }

	/* nagłówek strony: zdjęcie u góry, tekst pod spodem na kawie */
	.lo-hero-foto {
		min-height: 0; justify-content: flex-start; padding-top: calc(52vw + 24px) !important; padding-bottom: 56px !important;
		background:
			linear-gradient(180deg, rgba(59,39,25,0) 0%, rgba(59,39,25,0) 28vw, rgba(59,39,25,.85) 46vw, #3B2719 54vw),
			url("/wp-content/uploads/2026/08/Lutniczy-Outlet-Hero-1024x459.jpg") 72% top / auto 54vw no-repeat,
			#3B2719;
		box-shadow: none;
	}
	.lo-hero-foto h1 { font-size: 36px; }
	.lo-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.lo-hero .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
	.lo-pergamin .lo-grafika--ciemna { max-width: 320px; }
	.lo-sekcja .wp-block-columns { gap: 36px !important; }
}
/* menu rozwinięte na telefonie */
.lo-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; align-items: flex-start; }
.lo-naglowek .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: 18px; letter-spacing: .18em; padding: 12px 0; }

/* poprawka z 1.0.3: przyklejony nagłówek mniej blady */
header.is-przewiniety .lo-naglowek { background: rgba(59,39,25,.96); }

/* 1.0.5 — na komputerze ludzie ze zdjęcia przesunięci w prawo, tekst na czystym tle */
@media (min-width: 782px) {
	.lo-hero-foto {
		background:
			linear-gradient(90deg, #3B2719 0%, #3B2719 26vw, rgba(59,39,25,.55) 40vw, rgba(59,39,25,.12) 58vw, rgba(59,39,25,0) 70vw),
			url("/wp-content/uploads/2026/08/Lutniczy-Outlet-Hero-1536x689.jpg") left 26vw center / auto 100% no-repeat,
			#3B2719;
	}
}

/* ===== 1.0.6: logo, menu, koszyk, bursztynowy przycisk kontaktu ===== */
:root { --lo-bursztyn: #D9A54C; --lo-bursztyn-j: #E8C27A; --lo-bursztyn-c: #B9822E; }

/* Logo — złote, na przezroczystym tle */
.lo-naglowek .lo-logo { display: block; line-height: 0; }
.lo-naglowek .lo-logo img { height: 68px; width: auto; display: block; transition: height .5s var(--lo-krzywa); }
header.is-przewiniety .lo-naglowek .lo-logo img { height: 58px; }

/* Menu — większe, jaśniejsze, zwykłe litery, złota kreska wysuwana od środka */
.lo-naglowek .wp-block-navigation { font-size: 16px; letter-spacing: .06em; text-transform: none; font-weight: 400; }
.lo-naglowek .wp-block-navigation .wp-block-navigation-item:not(.lo-menu-cta) > a { color: #F6EBD8; position: relative; }
.lo-naglowek .wp-block-navigation .wp-block-navigation-item:not(.lo-menu-cta) > a::after {
	content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 1px; background: var(--lo-zloto);
	transition: left .45s var(--lo-krzywa), right .45s var(--lo-krzywa);
}
.lo-naglowek .wp-block-navigation .wp-block-navigation-item:not(.lo-menu-cta) > a:hover { color: var(--lo-zloto); }
.lo-naglowek .wp-block-navigation .wp-block-navigation-item:not(.lo-menu-cta) > a:hover::after,
.lo-naglowek .wp-block-navigation .current-menu-item > a::after { left: 0; right: 0; }

/* Kontakt w menu jako przycisk */
.lo-naglowek .wp-block-navigation .lo-menu-cta { margin-left: 6px; }
.lo-naglowek .wp-block-navigation .lo-menu-cta > a {
	padding: 11px 24px !important; color: #1E1510 !important; font-weight: 500; letter-spacing: .1em;
	background: linear-gradient(180deg, var(--lo-bursztyn-j), var(--lo-bursztyn)); border-radius: 2px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -8px rgba(0,0,0,.6);
	transition: background .4s ease, transform .4s var(--lo-krzywa), box-shadow .4s ease;
}
.lo-naglowek .wp-block-navigation .lo-menu-cta > a:hover {
	background: linear-gradient(180deg, var(--lo-bursztyn), var(--lo-bursztyn-c)); transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -8px rgba(0,0,0,.7);
}

/* Koszyk — cienka, delikatna torebka bez ramki */
.lo-naglowek .wc-block-mini-cart__button {
	border: 0 !important; min-width: 40px; min-height: 40px; padding: 6px !important; position: relative;
}
.lo-naglowek .wc-block-mini-cart__button svg.wc-block-mini-cart__icon { opacity: 0; width: 24px; height: 24px; }
.lo-naglowek .wc-block-mini-cart__quantity-badge { position: relative; }
.lo-naglowek .wc-block-mini-cart__quantity-badge::before {
	content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: var(--lo-zloto);
	-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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 10.5V6.5a3 3 0 0 1 6 0v4'/%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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 10.5V6.5a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .3s;
}
.lo-naglowek .wc-block-mini-cart__button:hover .wc-block-mini-cart__quantity-badge::before { background: var(--lo-szampan); }
.lo-naglowek .wc-block-mini-cart__badge {
	font-size: 9px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; font-weight: 500;
	background: var(--lo-bursztyn) !important; color: #1E1510 !important; border: 0 !important;
}

/* Bursztynowy przycisk przy każdej zachęcie do kontaktu */
a.wp-block-button__link[href$="#kontakt"], a.wp-block-button__link[href$="/kontakt/"], .lo-formularz button[type="submit"] {
	background: linear-gradient(180deg, var(--lo-bursztyn-j), var(--lo-bursztyn)) !important;
	color: #1E1510 !important; border: 1px solid var(--lo-bursztyn) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 30px -14px rgba(0,0,0,.55);
}
a.wp-block-button__link[href$="#kontakt"]::before, a.wp-block-button__link[href$="/kontakt/"]::before, .lo-formularz button[type="submit"]::before {
	background: var(--lo-bursztyn-c) !important;
}
a.wp-block-button__link[href$="#kontakt"]:hover, a.wp-block-button__link[href$="/kontakt/"]:hover, .lo-formularz button[type="submit"]:hover {
	color: #1E1510 !important; border-color: var(--lo-bursztyn-c) !important;
}

@media (max-width: 781px) {
	.lo-naglowek .lo-logo img { height: 46px; }
	header.is-przewiniety .lo-naglowek .lo-logo img { height: 40px; }
	.lo-naglowek .wp-block-navigation__responsive-container.is-menu-open .lo-menu-cta { margin: 18px 0 0; }
	.lo-naglowek .wp-block-navigation__responsive-container.is-menu-open .lo-menu-cta > a { font-size: 15px !important; padding: 14px 30px !important; }
}

/* 1.1.0: makieta okładki wpisu */
.lo-okladka-makieta a { display: block; color: inherit; text-decoration: none; }
.lo-okladka-makieta .lo-grafika { aspect-ratio: 16 / 10 !important; }

/* 1.1.2: dwa linki w nagłówku strony głównej zamiast przycisków */
.lo-hero-linki { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px !important; font-size: 17px; letter-spacing: .04em; }
.lo-hero-linki span { color: var(--lo-zloto); font-size: 8px; opacity: .7; }
.lo-ciemna .lo-hero-linki a, .lo-hero-linki a {
	color: #F6EBD8 !important; text-decoration: none; padding: 6px 0; position: relative;
	background: linear-gradient(var(--lo-zloto), var(--lo-zloto)) left bottom / 100% 1px no-repeat;
	transition: color .4s ease, background-size .5s var(--lo-krzywa);
}
.lo-hero-linki a::after { content: " →"; color: var(--lo-zloto); transition: margin .4s var(--lo-krzywa); }
.lo-hero-linki a:hover { color: var(--lo-zloto) !important; background-size: 0% 1px; background-position: right bottom; }
.lo-hero-linki a:hover::after { margin-left: 6px; }
@media (max-width: 600px) { .lo-hero-linki { flex-direction: column; align-items: flex-start; gap: 10px; } .lo-hero-linki span { display: none; } }
.lo-blog-wstep { margin-bottom: 48px; color: var(--lo-przyg); }
.lo-blog-lista .wp-block-post-title { font-size: 24px; }

/* 1.1.3: baza wiedzy — lista wpisów + panel autora */
.lo-blog-uklad { margin-top: 8px !important; align-items: flex-start !important; }
.lo-blog-lista .wp-block-post-template { gap: 48px 36px !important; }
.lo-blog-lista .wp-block-post-title { font-size: 23px !important; margin: 6px 0 10px; }
.lo-blog-lista .wp-block-post-excerpt { font-size: 16px; line-height: 1.65; color: var(--lo-przyg); }
.lo-blog-lista .wp-block-post-excerpt__more-link { color: var(--lo-zloto-c); text-decoration: none; font-size: 14px; letter-spacing: .06em; }
.lo-blog-data { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--lo-przyg-j); margin-top: 4px; }
.lo-blog-panel {
	position: sticky; top: 120px; background: var(--wp--preset--color--pergamin); border: 1px solid var(--lo-piasek);
	padding: 32px 30px 34px; box-shadow: 0 30px 60px -40px rgba(43,33,26,.35);
}
.lo-blog-panel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(126,95,51,.18); pointer-events: none; }
.lo-blog-portret { margin: 0 0 22px !important; }
.lo-blog-portret img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(126,95,51,.25); }
.lo-blog-panel h3 { font-size: 24px; margin: 4px 0 14px; }
.lo-blog-panel p { font-size: 16px; line-height: 1.7; }
.lo-blog-podpis { font-family: var(--wp--preset--font-family--bona-nova); font-style: italic; font-size: 20px !important; color: var(--lo-zloto-c); margin-top: 18px !important; }
.lo-blog-odnosniki { line-height: 2.1 !important; font-size: 15px !important; border-top: 1px solid var(--lo-piasek); padding-top: 14px; }
.lo-blog-odnosniki a { color: var(--lo-zloto-c); text-decoration: none; }
.lo-blog-odnosniki a::after { content: " →"; }
.lo-blog-odnosniki a:hover { color: var(--wp--preset--color--atrament); }
@media (max-width: 781px) { .lo-blog-panel { position: static; } .lo-blog-lista .wp-block-post-template { grid-template-columns: 1fr !important; } }

/* 1.1.4: baza wiedzy — wstęp, ścieżki, ściąga, liczba do zapamiętania */
.lo-blog-wstep { color: var(--wp--preset--color--atrament); margin-bottom: 0; }
.lo-blog-wstep > p { max-width: 760px; }
.lo-blog-lead { font-size: 21px !important; line-height: 1.6 !important; color: var(--wp--preset--color--atrament); }
.lo-sciezki { margin: 48px 0 0 !important; }
.lo-sciezka {
	background: #FFFFFF; border: 1px solid var(--lo-piasek); padding: 30px 28px 26px; position: relative;
	transition: transform .6s var(--lo-krzywa), box-shadow .6s var(--lo-krzywa), border-color .6s;
}
.lo-sciezka::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 2px; background: var(--lo-zloto); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--lo-krzywa); }
.lo-sciezka:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(43,33,26,.4); border-color: rgba(126,95,51,.35); }
.lo-sciezka:hover::before { transform: scaleX(1); }
.lo-sciezka .lo-liczba { font-family: var(--wp--preset--font-family--bona-nova); color: var(--lo-zloto-c); font-size: 26px !important; margin: 0 0 6px; }
.lo-sciezka h2 { font-size: 26px !important; margin: 0 0 10px; }
.lo-sciezka p { font-size: 16px; line-height: 1.65; color: var(--lo-przyg); }
.lo-sciezka-linki { border-top: 1px solid var(--lo-piasek); padding-top: 14px; margin-top: 16px !important; line-height: 2 !important; }
.lo-sciezka-linki a { color: var(--wp--preset--color--atrament); text-decoration: none; }
.lo-sciezka-linki a::before { content: "◆"; color: var(--lo-zloto); font-size: 7px; vertical-align: 3px; margin-right: 10px; }
.lo-sciezka-linki a:hover { color: var(--lo-zloto-c); }
.lo-sciagi { margin: 56px 0 0 !important; }
.lo-sciaga { background: var(--wp--preset--color--pergamin); border: 1px solid var(--lo-piasek); padding: 32px 32px 26px; }
.lo-sciaga h2, .lo-liczba-dnia h2 { font-size: 28px !important; margin: 4px 0 18px; }
.lo-tabela table { width: 100%; border-collapse: collapse; font-size: 16px; }
.lo-tabela th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lo-przyg); border-bottom: 1px solid var(--lo-zloto-c); padding: 10px 12px; }
.lo-tabela td { padding: 13px 12px; border-bottom: 1px solid var(--lo-piasek); }
.lo-tabela td:first-child { font-family: var(--wp--preset--font-family--bona-nova); font-size: 20px; color: var(--lo-zloto-c); }
.lo-tabela tbody tr:hover td { background: rgba(255,255,255,.6); }
.lo-tabela { margin: 0 0 16px !important; }
.lo-przypis { font-size: 13.5px !important; line-height: 1.65 !important; color: var(--lo-przyg); }
.lo-przypis a, .lo-liczba-dnia a { color: var(--lo-zloto-c); }
.lo-liczba-dnia { background: var(--lo-kawa); color: var(--lo-szampan); padding: 32px 30px; position: relative; overflow: hidden; }
.lo-liczba-dnia::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201,168,124,.25); pointer-events: none; }
.lo-liczba-dnia .lo-etykieta { color: var(--lo-przyg-j); }
.lo-liczba-dnia .lo-etykieta::after { background: var(--lo-zloto); }
.lo-liczba-dnia p { font-size: 15.5px; line-height: 1.7; }
.lo-liczba-dnia a { color: var(--lo-zloto); }
.lo-wielka-liczba { font-family: var(--wp--preset--font-family--bona-nova); font-size: 64px !important; line-height: 1 !important; color: var(--lo-zloto); margin: 6px 0 18px !important; }
.lo-blog-naglowek-listy { margin: 72px 0 28px !important; font-size: 34px !important; }
.lo-blog-naglowek-listy::after { content: ""; display: block; width: 56px; height: 1px; background: var(--lo-zloto-c); margin-top: 14px; }
@media (max-width: 781px) { .lo-blog-lead { font-size: 19px !important; } .lo-tabela table { font-size: 14px; } .lo-tabela th, .lo-tabela td { padding: 10px 6px; } .lo-wielka-liczba { font-size: 52px !important; } }
.wp-block-table.lo-tabela table, .wp-block-table.lo-tabela th, .wp-block-table.lo-tabela td, .wp-block-table.lo-tabela thead { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }
.wp-block-table.lo-tabela thead { border-bottom: 0 !important; }
.wp-block-table.lo-tabela td { border-bottom: 1px solid var(--lo-piasek) !important; }
.wp-block-table.lo-tabela th { border-bottom: 1px solid var(--lo-zloto-c) !important; }
.lo-sciezka-linki a { background: none !important; }