/* I-Materac: podstawa, naglowek, stopka. Ladowane na kazdej stronie. */
:root {
	--im-zloto: #db9b2e;
	--im-zloto-ciemne: #b97c12;
	--im-czern: #121212;
	--im-tekst: #1f1f1f;
	--im-szary: #6b6b6b;
	--im-linia: #e9e6e1;
	--im-tlo: #f7f5f2;
	--im-kontener: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; } /* 1 rem = 10 px, jak w Favou (licza na to wtyczki) */
body { margin: 0; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.6; color: var(--im-tekst); background: #fff; -webkit-font-smoothing: antialiased; }
:where(.im-motyw) img { max-width: 100%; height: auto; } /* :where = zerowa waga, kazda regula nizej wygrywa */
:where(.im-strona) a { color: inherit; text-decoration: none; } /* :where = waga samego znacznika, zeby reguly wyciete z Favou (css/favou-*.css) mogly ja nadpisac */
.im-kontener { max-width: var(--im-kontener); margin: 0 auto; padding: 0 24px; }
.im-ikona { flex: none; display: block; }
[hidden] { display: none !important; }

/* Naglowek i stopka maja wlasna podstawe tekstu wpisana wprost: strony w ramie Favou (karta, koszyk, strony tekstowe)
   zmieniaja podstawe na <body> (css/favou-wspolne.css), a dwie z nich robia to nawet z tresci strony. */
.im-pasek, .im-naglowek, .im-zaslona, .im-stopka { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--im-tekst); }

/* Nasze elementy doklejane do <body> (szuflada koszyka, pasek zakupu na telefonie) powstaly pod podstawowe style Favou:
   tekst 14 px / 1.7 i pola dziedziczace czcionke. Dajemy im to samo, zeby wygladaly jak w sklepie. */
.imcd-root, .impd-bar { font-size: 14px; line-height: 1.7; }
:where(.imcd-root, .impd-bar) :where(button, input, select, textarea) { font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.imcd-root, .impd-bar) p { font-size: 16px; line-height: 27px; } /* regula "p" z Dodatkowego CSS sklepu */

/* Przyciski */
.im-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border: 0; border-radius: 8px; font: 700 15px/1 "Open Sans", sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .15s; }
.im-strona .im-btn--zloty { background: var(--im-zloto); color: #fff; }
.im-strona .im-btn--zloty:hover { background: var(--im-zloto-ciemne); }

/* Gorny pasek */
.im-pasek { background: var(--im-tlo); font-size: 13px; color: #454545; }
.im-pasek__w { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.im-pasek__korzysci { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.im-pasek__korzysci li, .im-pasek__tel { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.im-pasek__tel strong { color: var(--im-czern); font-weight: 700; }

/* Naglowek */
/* Plywajacy naglowek (komputer i telefon, Konrad 10-10-2026): przy przewijaniu w dol naglowek odjezdza razem ze strona,
   przy przewijaniu w gore wjezdza z gory i trzyma sie krawedzi okna. Zrobione samym `position: sticky`: ujemne `top` rowne
   wysokosci naglowka = element "przykleja sie" dopiero tuz nad oknem, czyli zachowuje sie jak zwykly; klasa im-nagl-widoczny
   (js/motyw.js) zmienia `top` na 0, a przejscie na `top` daje wjazd i wyjazd. Bez `transform`, bo transform na naglowku
   zepsulby `position: fixed` wysuwanego menu. Naglowek zostaje w ukladzie strony, wiec tresc nie skacze. */
.im-naglowek { background: #fff; border-bottom: 1px solid var(--im-linia); position: sticky; top: calc(-1 * var(--im-nagl-h, 90px) - 4px); z-index: 900; transition: top .25s ease, box-shadow .25s ease; }
html.im-nagl-widoczny .im-naglowek { top: 0; box-shadow: 0 6px 22px rgba(0, 0, 0, .07); }
@media (prefers-reduced-motion: reduce) { .im-naglowek { transition: none; } }
/* Pasek korzysci i naglowek maja szerokosc banera strony glownej (ramka 1500 px + 24 px marginesu), nie kontenera tresci:
   logo zaczyna sie rowno z lewa krawedzia banera, ikony koncza z prawa (Konrad 10-10-2026). Na kazdej podstronie tak samo. */
.im-kontener.im-pasek__w, .im-kontener.im-naglowek__w { max-width: 1548px; }
.im-naglowek__w { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.im-logo { flex: none; display: block; line-height: 0; }
.im-logo img { height: 32px; width: auto; }
.im-menu__gora, .im-menu__kontakt, .im-naglowek .im-menu-btn, .im-naglowek .im-lupa { display: none; }
.im-menu__lista { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.im-menu__lista > li > a { display: inline-flex; align-items: center; gap: 4px; padding: 30px 0; font-size: 14.5px; font-weight: 600; color: var(--im-czern); white-space: nowrap; }
.im-menu__lista > li > a:hover, .im-menu__lista > li:focus-within > a { color: var(--im-zloto-ciemne); }
/* "Tu jestesmy": pozycja biezacej sekcji ma zloty napis i kreske na dolnej krawedzi naglowka, biezaca pozycja listy jest zlota */
.im-menu__lista > li.im-menu__tu > a { color: var(--im-zloto-ciemne); box-shadow: inset 0 -3px 0 var(--im-zloto); }
.im-menu__panel li a[aria-current="page"] { color: var(--im-zloto-ciemne); font-weight: 600; }
.im-menu__wszystko { display: none; }
.im-menu__z-lista { position: relative; }
.im-menu__panel { display: none; position: absolute; top: 100%; left: -26px; gap: 44px; min-width: 470px; padding: 24px 28px; background: #fff; border: 1px solid var(--im-linia); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .08); }
.im-menu__z-lista:hover .im-menu__panel, .im-menu__z-lista:focus-within .im-menu__panel { display: flex; }
/* Zwykla lista rozwijana (Akcesoria, Informacje): jedna kolumna, waski panel */
.im-menu__panel.im-menu__panel--proste { min-width: 230px; padding: 16px 24px; }
.im-menu__panel--proste ul { width: 100%; }
.im-menu__lista > li > a.im-menu__bez-strony { cursor: default; }
.im-menu__tytul { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--im-szary); }
.im-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.im-menu__panel li a { display: block; padding: 6px 0; font-size: 15px; color: var(--im-tekst); white-space: nowrap; }
.im-menu__panel li a:hover { color: var(--im-zloto-ciemne); }
.im-menu__rozmiary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.im-szukaj { flex: 1 1 0; min-width: 150px; max-width: 360px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1px solid var(--im-linia); border-radius: 999px; color: #777; background: #fff; }
.im-szukaj:focus-within { border-color: var(--im-zloto); }
.im-szukaj input, .im-szukaj-tel input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 14px/1 "Open Sans", sans-serif; color: var(--im-tekst); }
.im-narzedzia { display: flex; align-items: center; gap: 4px; flex: none; }
.im-ikona-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--im-czern); cursor: pointer; }
.im-ikona-btn:hover { background: var(--im-tlo); }
.im-koszyk-ile, .im-obs-ile { position: absolute; top: 0; right: -3px; display: flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--im-zloto); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.im-koszyk-pusty { background: #cfcac3; }
.im-obs-ile { background: var(--im-czern); }
.im-szukaj-tel { padding: 0 16px 14px; }

/* Strona Obserwowane */
.im-obs__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.im-obs__karta { position: relative; display: flex; flex-direction: column; padding: 12px 12px 14px; border: 1px solid var(--im-linia); border-radius: 12px; }
.im-obs__karta img { display: block; width: 100%; border-radius: 8px; margin-bottom: 10px; }
.im-obs__nazwa { font-weight: 600; line-height: 1.4; color: var(--im-czern); }
.im-obs__cena { margin: 8px 0 12px; font-size: 17px; font-weight: 700; }
.im-obs__cena del { margin-right: 6px; font-size: 14px; font-weight: 400; color: var(--im-szary); }
.im-obs__cena ins { text-decoration: none; }
.im-obs__usun { margin-top: auto; padding: 0; border: 0; background: none; font: 400 13px/1.4 "Open Sans", sans-serif; color: var(--im-szary); text-align: left; text-decoration: underline; cursor: pointer; }
.im-szukaj-tel input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--im-linia); border-radius: 999px; }
.im-zaslona { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .45); }

/* Zwykle strony i wpisy (do czasu wlasnych szablonow) */
.im-zwykla { max-width: 900px; padding-top: 40px; padding-bottom: 60px; }
.im-tytul { margin: 0 0 22px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--im-czern); }
.im-wpis__tresc, .im-tekst { font-size: 16px; line-height: 27px; }
.im-wpis__tresc a, .im-tekst a { color: var(--im-zloto-ciemne); text-decoration: underline; }
.im-wpis__tresc h2, .im-tekst h2 { margin: 28px 0 10px; font-size: 24px; line-height: 1.25; }
.im-wpis__tresc h3, .im-tekst h3 { margin: 22px 0 8px; font-size: 19px; line-height: 1.3; }
#primary { max-width: var(--im-kontener); margin: 0 auto; padding: 28px 24px 56px; }

/* Stopka */
.im-stopka { margin-top: 48px; background: var(--im-tlo); font-size: 14px; color: #4a4a4a; }
.im-stopka__w { display: grid; grid-template-columns: 1.15fr 1.25fr 1fr 1fr; gap: 44px; padding-top: 52px; padding-bottom: 44px; }
.im-stopka__logo { height: 30px; width: auto; margin-bottom: 18px; }
.im-stopka p { margin: 0 0 8px; }
.im-stopka__tytul { margin: 0 0 14px !important; font-size: 16px; font-weight: 700; color: var(--im-czern); }
.im-stopka ul { list-style: none; margin: 0; padding: 0; }
.im-stopka li a { display: inline-block; padding: 5px 0; }
.im-stopka a:hover { color: var(--im-zloto-ciemne); }
.im-stopka__tel { display: inline-block; margin-bottom: 8px; font-size: 24px; font-weight: 700; color: var(--im-czern); }
.im-stopka__fb { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--im-czern); color: #fff !important; }
.im-stopka__tm { margin-top: 18px; min-height: 56px; }
.im-stopka__odstap { margin-top: 12px; }
.im-stopka__dol { border-top: 1px solid var(--im-linia); font-size: 13px; }
.im-stopka__dol-w { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; }

/* Szeroki ekran: wiecej powietrza w naglowku */
@media (min-width: 1500px) {
	.im-naglowek__w { gap: 30px; }
	.im-menu__lista { gap: 28px; }
	.im-menu__lista > li > a { font-size: 15px; }
	.im-logo img { height: 34px; }
}
/* Wezszy komputer: szukanie pod lupa (pole zostaje w stronie dla LivBerry) */
@media (max-width: 1199px) {
	.im-szukaj { display: none; }
	.im-naglowek .im-lupa { display: inline-flex; }
	.im-narzedzia { margin-left: auto; }
	.im-pasek__korzysci { gap: 22px; }
	.im-pasek__korzysci li:nth-child(n+4) { display: none; }
}

/* Telefon i tablet: menu wysuwane, szukanie pod lupa, naglowek przyklejony */
@media (max-width: 1099px) {
	.im-kontener { padding: 0 16px; }
	.im-pasek__w { justify-content: center; min-height: 34px; }
	.im-pasek__korzysci li:nth-child(n+2), .im-pasek__tel { display: none; }
	.im-pasek { font-size: 12.5px; }
	.im-naglowek__w { gap: 4px; min-height: 62px; }
	.im-naglowek .im-menu-btn, .im-naglowek .im-lupa { display: inline-flex; }
	.im-menu-btn { margin-left: -10px; }
	.im-logo { margin-right: auto; }
	.im-logo img { height: 27px; }
	.im-szukaj { display: none; }
	.im-narzedzia { margin-right: -8px; gap: 0; }
	.im-menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: min(86vw, 360px); padding: 0 20px 28px; overflow-y: auto; background: #fff; transform: translateX(-102%); transition: transform .25s ease; }
	html.im-menu-otwarte .im-menu { transform: none; }
	/* Naglowek (sticky, z-index 900) tworzy wlasny kontekst warstw, wiec zaslona (950) przykrywala wysuniety panel menu (1000
	   liczy sie tylko wewnatrz naglowka): stukniecie w pozycje menu trafialo w zaslone i zamykalo menu. Przy otwartym menu
	   naglowek idzie nad zaslone, a jego pasek poza panelem jest przyciemniany wlasna nakladka. */
	html.im-menu-otwarte .im-naglowek { z-index: 960; }
	html.im-menu-otwarte .im-naglowek::after { content: ""; position: absolute; inset: 0; z-index: 999; background: rgba(0, 0, 0, .45); }
	html.im-menu-otwarte { overflow: hidden; }
	.im-menu__gora { display: flex; align-items: center; justify-content: space-between; min-height: 62px; margin: 0 -8px 6px 0; font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--im-linia); }
	.im-menu__lista { display: block; }
	.im-menu__lista > li { border-bottom: 1px solid var(--im-linia); }
	.im-menu__lista > li > a { display: flex; justify-content: space-between; padding: 15px 0; font-size: 16px; }
	.im-menu__lista > li.im-menu__tu > a { box-shadow: none; }
	/* Listy rozwijane sa domyslnie ZWINIETE (uwaga Konrada 13-10-2026), poza sekcja, w ktorej jestesmy (klasa z szablonu);
	   stukniecie w pozycje rozwija jej liste (js/motyw.js) */
	.im-menu__z-lista > a .im-ikona { width: 20px; height: 20px; color: var(--im-czern); transition: transform .2s ease; }
	.im-menu__z-lista.im-menu__rozwiniete > a .im-ikona { transform: rotate(180deg); }
	.im-menu__lista > li > a.im-menu__bez-strony { cursor: pointer; }
	.im-menu__panel { display: none !important; position: static; min-width: 0; padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; }
	.im-menu__panel.im-menu__panel--proste { min-width: 0; padding: 0 0 12px; }
	.im-menu__z-lista.im-menu__rozwiniete > .im-menu__panel { display: block !important; }
	.im-menu__wszystko { display: block; }
	.im-menu__rozmiary a[aria-current="page"] { border-color: var(--im-zloto); }
	.im-menu__kol + .im-menu__kol { margin-top: 12px; }
	.im-menu__rozmiary { grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.im-menu__rozmiary a { padding: 9px 0 !important; text-align: center; border: 1px solid var(--im-linia); border-radius: 8px; font-size: 14px !important; font-weight: 600; }
	/* Kontakt pod lista: ciszej niz pozycje menu (mniejsza czcionka, odstep od listy), zloto tylko w ikonach */
	.im-menu__kontakt { display: block; margin-top: 26px; }
	.im-menu__kontakt-wiersz { display: flex; align-items: center; gap: 13px; padding: 11px 0; font-size: 14.5px; line-height: 1.3; color: var(--im-tekst); }
	.im-menu__kontakt-wiersz + .im-menu__kontakt-wiersz { border-top: 1px solid var(--im-linia); }
	.im-menu__kontakt-ikona { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--im-tlo); color: var(--im-zloto-ciemne); }
	.im-menu__kontakt-tekst { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
	.im-menu__kontakt-tekst strong { font-size: 15.5px; font-weight: 600; color: var(--im-czern); }
	.im-menu__kontakt-tekst small { font-size: 12.5px; color: var(--im-szary); }
	.im-menu__kontakt-wiersz > .im-ikona { color: #b9b4ad; transform: rotate(-90deg); }
	.im-zwykla { padding-top: 26px; padding-bottom: 40px; }
	.im-tytul { font-size: 26px; }
	#primary { padding: 20px 16px 40px; }
	.im-stopka__w { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-top: 36px; padding-bottom: 30px; }
}
@media (max-width: 600px) {
	.im-stopka__w { grid-template-columns: 1fr; }
	.im-stopka__dol-w { flex-direction: column; gap: 6px; }
}

/* Plywajaca plakietka TrustMate (#tm-widget-muskrat2 wstawia wtyczka TrustMate, na stagingu wylaczona): schowana w koszyku i kasie,
   przy otwartej wyszukiwarce LivBerry i w powiekszeniu zdjec. Z "Dodatkowego CSS" Favou (19-10-2026, po przenosinach); reguly z :has()
   osobno, zeby przegladarka bez :has() nie odrzucila calej reguly. */
body.woocommerce-cart #tm-widget-muskrat2, body.woocommerce-checkout #tm-widget-muskrat2 { display: none !important; }
body.fancybox-active #tm-widget-muskrat2, html.with-fancybox #tm-widget-muskrat2 { display: none !important; }
body:has(#livberry-search .lvb-search-container) #tm-widget-muskrat2 { display: none !important; }
body:has(.fancybox-container) #tm-widget-muskrat2, body:has(.fancybox__container) #tm-widget-muskrat2, body:has(.pswp--open) #tm-widget-muskrat2 { display: none !important; }

/* Plakietka TrustMate (i czat Tidio, gdyby wrocil) nie wchodzi na menu telefonu ani na baner ciasteczek (zgloszenie Konrada 20-10-2026),
   ani na panel filtrow list na telefonie (html.im-l-filtry-otwarte z js/listy.js, zgloszenie 22-10-2026).
   Baner WP Full Picture: na ekranie klasa fupi_fadeInUp (takze z otwartym "Ustaw"), po wyborze fupi_fadeOutDown, na kolejnych stronach
   fupi_hidden; plakietka wraca po wyborze. To samo co w imhd.css Favou (nowy motyw tego pliku nie laduje). visibility, nie display:
   tak chowamy plakietke wszedzie (impd.css, imcd.css); :has() w osobnej regule. */
html.im-menu-otwarte .tm-muskrat2__sticker, html.im-menu-otwarte #tidio-chat,
html.im-l-filtry-otwarte .tm-muskrat2__sticker, html.im-l-filtry-otwarte #tidio-chat { visibility: hidden !important; }
html:has( #fupi_cookie_notice.fupi_fadeInUp ) .tm-muskrat2__sticker, html:has( #fupi_cookie_notice.fupi_fadeInUp ) #tidio-chat { visibility: hidden !important; }
#fupi_cookie_notice { z-index: 2147483647 !important; } /* w chwili zjezdzania banera i w przegladarce bez :has() baner przykrywa plakietke */

/* Okruszki ("Strona glowna / ...") schowane w wersji mobilnej (do 991 px, tak jak naglowek telefonu), decyzja Konrada 24-10-2026.
   Wszystkie szablony: karta i strony (sam nav .im-okruszki__lista, bo w page.php ten sam blok niesie h1), listy, wpis, informacje,
   O nas, model, lista bloga. Na stronie modelu odstep pod naglowkiem robily okruszki, wiec dostaje go .im-model (body = zapas nad
   model.css). Dane strukturalne Yoast zostaja. */
@media (max-width: 991px) {
	.im-okruszki__lista, .im-l-okruszki, .im-w-okruszki, .im-i-okruszki, .im-o-okruszki, .im-model__okruszki, .im-blogowa__okruszki { display: none !important; }
	body .im-model { padding-top: 24px; }
}