/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
	--ge-tekst: #1e2a32;
	--ge-tekst-jasny: #6C757D;
	--ge-linia: #e3e8eb;
	--ge-tlo: #f6f8f9;
	--ge-akcent: #1e6b8f;
	--ge-radius: 10px;

	/* Kolory z siatki realizacji, wyciągnięte do :root, żeby karty producentów
	   i przyciski katalogów używały tej samej granatowej bazy co pigułki filtrów. */
	--ge-primary: #2F3A4A;
	--ge-primary-hover: #3C4A5A;
	--ge-naglowek: #343A40;
	--ge-ramka: #E9ECEF;
	--ge-zloty: #D9BE76;
}

body:not(.elementor-editor-active):not(.ma-detale) :is(#sekcja-detale, .sekcja-detale),
body:not(.elementor-editor-active):not(.ma-wzory) :is(#sekcja-wzory, .sekcja-wzory),
body:not(.elementor-editor-active):not(.ma-aranzacje) :is(#sekcja-aranzacje, .sekcja-aranzacje),
body:not(.elementor-editor-active):not(.ma-katalogi) :is(#sekcja-katalogi, .sekcja-katalogi),
body:not(.elementor-editor-active):not(.ma-parametry) :is(#sekcja-parametry, .sekcja-parametry),
body:not(.elementor-editor-active):not(.ma-zalety) :is(#sekcja-zalety, .sekcja-zalety),
body:not(.elementor-editor-active):not(.ma-przycisk-szczegoly) :is(#sekcja-przycisk, .sekcja-przycisk),
body:not(.elementor-editor-active):not(.ma-podtytul) :is(#sekcja-podtytul, .sekcja-podtytul),
body:not(.elementor-editor-active):not(.ma-producent) :is(#sekcja-producent, .sekcja-producent) {
	display: none !important;
}

/* Podgląd w edytorze: sekcja, która na froncie będzie ukryta, dostaje
   przerywaną ramkę i przygaszenie, żeby było widać, że jest warunkowa. */
body.elementor-editor-active:not(.ma-detale) :is(#sekcja-detale, .sekcja-detale),
body.elementor-editor-active:not(.ma-wzory) :is(#sekcja-wzory, .sekcja-wzory),
body.elementor-editor-active:not(.ma-aranzacje) :is(#sekcja-aranzacje, .sekcja-aranzacje),
body.elementor-editor-active:not(.ma-katalogi) :is(#sekcja-katalogi, .sekcja-katalogi),
body.elementor-editor-active:not(.ma-parametry) :is(#sekcja-parametry, .sekcja-parametry),
body.elementor-editor-active:not(.ma-zalety) :is(#sekcja-zalety, .sekcja-zalety) {
	outline: 2px dashed rgba(217, 190, 118, 0.9);
	outline-offset: -2px;
	opacity: 0.55;
}

.produkt-galeria {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.produkt-galeria__glowne {
	display: block;
	border-radius: var(--ge-radius);
	overflow: hidden;
	background: var(--ge-tlo);
}

.produkt-galeria__glowne img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.produkt-galeria__miniatury {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

/* Więcej niż 4 zdjęcia: piąte i kolejne schodzą do drugiego rzędu. */
@media (max-width: 480px) {
	.produkt-galeria__miniatury {
		grid-template-columns: repeat(3, 1fr);
	}
}

.produkt-galeria__miniatura {
	display: block;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
}

.produkt-galeria__miniatura img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	opacity: 0.65;
	transition: opacity 0.18s ease;
}

.produkt-galeria__miniatura:hover img,
.produkt-galeria__miniatura:focus-visible img {
	opacity: 1;
}

.produkt-galeria__miniatura[aria-pressed="true"] {
	border-color: var(--ge-akcent);
}

.produkt-galeria__miniatura[aria-pressed="true"] img {
	opacity: 1;
}

.produkt-galeria__miniatura:focus-visible {
	outline: 2px solid var(--ge-akcent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.produkt-galeria__miniatura img {
		transition: none;
	}
}

.produkt-parametry {
    width: 100%;
    border-collapse: collapse;
}
.produkt-parametry th,
.produkt-parametry td {
    text-align: left;
    padding: 12px 0;
    font-size: 0.9rem;
    vertical-align: top;
}
.produkt-parametry th {
    color: #343A40;
    font-weight: 600;
    width: 45%;
    padding-right: 16px;
}
.produkt-parametry td {
    color: #6C757D;
}
.produkt-zalety {
    list-style: disc;
    padding-left: 20px;
	font-size: 0.9rem;
    margin: 0;
}
.produkt-zalety li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* --- Detale i rozwiązania -------------------------------------------- */
.produkt-detale {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 28px;
	margin: 32px 0;
}

.produkt-detal {
	font-family: 'Inter';
	background: var(--ge-tlo);
	border-radius: var(--ge-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid #E9ECEF;
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.06);
}

.produkt-detal__obraz {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.produkt-detal__tresc {
	padding: 18px 20px 22px;
}

.produkt-detal__tytul {
	margin: 0 0 8px;
	font-size: 1.0rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ge-tekst);
}

.produkt-detal__opis {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ge-tekst-jasny);
}

/* --- Wzory / kolory --------------------------------------------------- */
.produkt-wzory {
	list-style: none;
	margin: 24px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.produkt-wzor {
	text-align: center;
}

.produkt-wzor img {
	width: 100%;
	height: auto;
	border: 1px solid var(--ge-linia);
	border-radius: 6px;
	display: block;
}

.produkt-wzor__nazwa {
	display: block;
	margin-top: 8px;
	font-size: 0.82rem;
	color: var(--ge-tekst-jasny);
}

/* --- Aranżacje -------------------------------------------------------- */
.produkt-aranzacje {
	list-style: none;
	margin: 24px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.produkt-aranzacje img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	transition: transform 0.25s ease;
}

.produkt-aranzacje a:hover img {
	transform: scale(1.02);
}

/* ==========================================================================
   Pełna szerokość widgetów z naszymi shortcodami
   ==========================================================================
   Sekcje oferty siedzą w atomowych kontenerach Elementora
   (`e-flexbox`, data-e-type="e-flexbox"), a te mają
   `display:flex; flex-direction: row !important`.

   Widget shortcode jest wtedy elementem flex o szerokości dopasowanej do
   treści. Siatka z `auto-fill` w kontekście NIEOKREŚLONEJ szerokości zwija
   się zgodnie ze specyfikacją do jednej kolumny, a kolumna przyjmuje
   szerokość największego elementu. Stąd galeria w jednej kolumnie po 300 px
   i pustka po prawej przy karcie katalogu.

   Właściwe rozwiązanie jest w edytorze: kontener sekcji ma mieć kierunek
   PIONOWY. Ta reguła jest zabezpieczeniem, żeby układ nie zależał od tego,
   czy ktoś kiedyś przestawi kierunek z powrotem na poziomy. */

.elementor-widget-shortcode:has(.oferta-karty),
.elementor-widget-shortcode:has(.kategoria-opis),
.elementor-widget-shortcode:has(.katalogi-lista--kategoria),
.elementor-widget-shortcode:has(.kategoria-galeria-blok),
.elementor-widget-shortcode:has(.kategoria-logo) {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* Ten sam efekt dla przeglądarek bez :has(), przez ID kontenerów sekcji. */
#sekcja-karty > .elementor-widget,
#sekcja-opis > .elementor-widget,
#sekcja-katalogi-kat > .elementor-widget,
#sekcja-galeria > .elementor-widget,
#sekcja-logo > .elementor-widget {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* Same siatki też deklarują szerokość, na wypadek innego opakowania. */
.oferta-karty,
.katalogi-lista--kategoria,
.kategoria-galeria-blok,
.kategoria-galeria {
	width: 100%;
}

/* ==========================================================================
   OFERTA: kategoria -> producent -> produkt
   Karty producentów, opis, katalogi, galeria całej oferty, logo.
   Pod shortcody [oferta_karty], [kategoria_opis], [kategoria_katalogi],
   [kategoria_galeria], [kategoria_logo].
   ========================================================================== */

/* --- Kafelki producentów na stronie kategorii --------------------------- */
.oferta-karty {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1024px) {
	.oferta-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.oferta-karty { grid-template-columns: 1fr; gap: 16px; }
}

/* Karta producenta jest zbudowana wg tego samego spisu, co karta produktu
   z pętli (loop item 3975). Wartości przepisane 1:1 z CSS Elementora, żeby
   oba rodzaje kafelków stały obok siebie bez zgrzytu:

     kontener   ramka 2px #E9ECEF, promień 1rem, padding 16px, tło białe
     zdjęcie    promień 12px, wysokość 15em, object-fit: cover
     odstęp     20px między zdjęciem a treścią
     tytuł      Inter 1.125rem / 1.5rem, 700, #343A40
     opis       0.875rem / 1.625rem, 400, #6C757D
     przycisk   globalna klasa .button-solid (czerwony #B11117)

   Zdjęcie jest WSUNIĘTE w padding karty, nie dochodzi do krawędzi. */
.oferta-karta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--powierzchnia, #fff);
	border: 2px solid var(--ge-ramka);
	border-radius: 1rem;
	padding: 16px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease;
}

.oferta-karta:hover { border-color: #D7DDE2; }

.oferta-karta:focus-visible {
	outline: 2px solid var(--ge-primary);
	outline-offset: 2px;
}

.oferta-karta__obraz {
	border-radius: 12px;
	overflow: hidden;
	background: var(--ge-tlo);
}

.oferta-karta__obraz img {
	width: 100%;
	height: 15em;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
}

.oferta-karta__tresc {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 20px;
}

.oferta-karta__tytul {
	margin: 0 0 8px;
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5rem;
	color: var(--ge-naglowek);
}

.oferta-karta:hover .oferta-karta__tytul { color: var(--ge-primary); }

.oferta-karta__opis {
	margin: 0 0 14px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.625rem;
	color: var(--ge-tekst-jasny);
}

.oferta-karta__liczba {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ge-tekst-jasny);
	font-variant-numeric: tabular-nums;
}

/* Wygląd przycisku dziedziczy się z globalnej klasy .button-solid, którą
   shortcode dokleja do CTA. Tu tylko ustawienie w kolumnie: margin-top:auto
   równa przyciski w rzędzie przy różnej długości opisów, a align-self
   powstrzymuje flexa przed rozciągnięciem na całą szerokość karty. */
.oferta-karta__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* Globalny styl rozciąga przyciski na telefonie, więc kafelek robi tak samo. */
@media (max-width: 767px) {
	.oferta-karta__cta { align-self: stretch; }
}

/* --- Opis producenta ---------------------------------------------------- */
.kategoria-opis {
	max-width: 70ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ge-tekst-jasny);
}

.kategoria-opis h2 {
	margin: 32px 0 10px;
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--ge-naglowek);
}

.kategoria-opis h3 {
	margin: 24px 0 8px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ge-naglowek);
}

.kategoria-opis p {
	margin: 0 0 14px;
}

.kategoria-opis ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.kategoria-opis li {
	margin-bottom: 6px;
}

.kategoria-opis table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 0.9rem;
}

.kategoria-opis th,
.kategoria-opis td {
	text-align: left;
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--ge-ramka);
	vertical-align: top;
}

.kategoria-opis th {
	font-weight: 600;
	color: var(--ge-naglowek);
}
/* --- Katalogi na stronie producenta -------------------------------------
   Karta jest POZIOMA, nie pionowa jak karta produktu. Powód jest prosty:
   producent ma zwykle jeden albo dwa katalogi, a pionowa karta na 320 px
   zostawiała trzy czwarte szerokości puste i wyglądała na błąd układu.

   Kolumna siatki ma minimum 440 px, więc jeden katalog zajmuje całą
   szerokość, dwa stają obok siebie, a trzy schodzą do dwóch rzędów.

   min(440px, 100%) zamiast samego 440px: bez tego ścieżka siatki nie może
   zejść poniżej 440 px i na ekranie węższym niż 440 px strona przewija się
   w poziomie. Z min() ścieżka spada do szerokości kontenera.

   Wykończenie zostaje takie jak w karcie produktu: ramka 2 px, promień
   1 rem, padding 16 px, okładka z promieniem 12 px, przycisk button-solid. */
.katalogi-lista--kategoria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
	gap: 24px;
}

.katalog-karta {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
	background: #fff;
	border: 2px solid var(--ge-ramka);
	border-radius: 1rem;
	padding: 16px;
	transition: border-color .18s ease;
}

.katalog-karta:hover { border-color: #D7DDE2; }

@media (max-width: 560px) {
	.katalog-karta { grid-template-columns: 1fr; }
	.katalog-karta__okladka { max-width: 200px; }
}

/* „contain”, a nie „cover”: okładka katalogu ma nazwę producenta przy górnej
   krawędzi i kadrowanie by ją ucinało. */
.katalog-karta__okladka {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	object-position: center center;
	display: block;
	border-radius: 12px;
	background: var(--ge-tlo);
	border: 0;
}

.katalog-karta__tresc {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.katalog-karta__tytul {
	margin: 0 0 8px;
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5rem;
	color: var(--ge-naglowek);
}

.katalog-karta__opis {
	margin: 0 0 10px;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.625rem;
	color: var(--ge-tekst-jasny);
}

.katalog-karta__meta {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ge-tekst-jasny);
	font-variant-numeric: tabular-nums;
}

/* margin-top:auto dosuwa przyciski do dołu karty, więc równają się
   z dolną krawędzią okładki niezależnie od długości opisu. */
.katalog-karta__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	padding-top: 4px;
}

@media (min-width: 561px) {
	.katalog-karta__akcje { margin-top: auto; }
}

/* Pobierz PDF dziedziczy wygląd z globalnej klasy .button-solid.
   Drugi przycisk jest obrysowany, żeby akcja główna była tylko jedna. */
.katalog-karta__online {
	padding: 10px 20px;
	border: 1px solid var(--ge-ramka);
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--ge-tekst-jasny);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.katalog-karta__online:hover {
	border-color: var(--ge-primary);
	color: var(--ge-primary);
}

/* --- Galeria całej oferty ------------------------------------------------
   Erkado ma 90 zdjęć, więc siatka w cztery kolumny dawała ścianę na 23 rzędy.
   Układ arkusza stykowego: mniejsze kadry, więcej w rzędzie, a domyślnie
   widać tylko pierwszą partię. Reszta czeka za przyciskiem.

   --start to liczba kafelków widocznych przed rozwinięciem, podawana przez
   shortcode. Reguła nth-child chowa resztę, dopóki na kontenerze wisi
   klasa --zwinieta. Bez JS klasa nie zostaje zdjęta, ale wtedy przycisk
   też się nie pokazuje, a PHP renderuje galerię rozwiniętą.

   Podpisy są domyślnie wyłączone: przy dziewięćdziesięciu kafelkach nazwy
   robią szum, a lightbox i tak pokazuje tytuł zdjęcia. Włączasz je
   atrybutem [kategoria_galeria podpisy="tak"]. */
.kategoria-galeria-blok {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.kategoria-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

@media (max-width: 700px) {
	.kategoria-galeria {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: 10px;
	}
}

/* Które kafelki są nadmiarowe, decyduje PHP przy renderowaniu: dokleja
   klasę --ukryty od pozycji `start` w górę. Bez kombinowania z nth-child
   i var(), których CSS w selektorach nie liczy. */
.kategoria-galeria--zwinieta .kategoria-galeria__item--ukryty {
	display: none;
}

.kategoria-galeria__item {
	margin: 0;
}

.kategoria-galeria__item a {
	display: block;
	aspect-ratio: 1;
	background: var(--ge-tlo);
	border: 1px solid var(--ge-ramka);
	border-radius: 10px;
	overflow: hidden;
}

.kategoria-galeria__item a:hover,
.kategoria-galeria__item a:focus-visible {
	border-color: var(--ge-primary);
}

.kategoria-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.kategoria-galeria__item a:hover img {
	transform: scale(1.06);
}

.kategoria-galeria__podpis {
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ge-tekst-jasny);
	text-align: center;
}

.kategoria-galeria-akcje {
	display: flex;
	justify-content: center;
}

.kategoria-galeria__wiecej {
	cursor: pointer;
	border: 0;
	font-family: inherit;
}

/* --- Logo producenta ---------------------------------------------------- */
.kategoria-logo {
	display: flex;
	justify-content: center;
}

/* Logotypy producentów mają różne proporcje: ERKADO jest szerokie i niskie,
   inne bywają kwadratowe. Przy max-width każde zajmowało inną powierzchnię
   i sekcja skakała między stronami producentów.

   Stała ramka 200 x 64 px plus object-fit: contain daje wszystkim identyczny
   gabaryt: logo wpisuje się w ramkę, nie deformuje się i nie przycina.
   Szerokość ograniczona vw, żeby na telefonie nie wychodziło poza treść. */
.kategoria-logo__obraz {
	width: min(200px, 60vw);
	height: 64px;
	object-fit: contain;
	object-position: center center;
	opacity: .7;
	transition: opacity .15s ease;
}

.kategoria-logo a:hover .kategoria-logo__obraz {
	opacity: 1;
}

/* --- Sekcje warunkowe na archiwum oferty --------------------------------
   Nadaj kontenerom w szablonie archiwum ID (Zaawansowane -> ID):

     [oferta_karty]        -> sekcja-karty
     [kategoria_opis]      -> sekcja-opis
     [kategoria_katalogi]  -> sekcja-katalogi-kat
     Loop Grid produktów   -> sekcja-produkty
     [kategoria_galeria]   -> sekcja-galeria
     [kategoria_logo]      -> sekcja-logo

   Uwaga na „sekcja-katalogi-kat”: samo „sekcja-katalogi” jest już zajęte
   przez kartę produktu wyżej, a tamta reguła patrzy na klasę „ma-katalogi”,
   której archiwum nigdy nie dostaje. Ten sam ID w obu miejscach schowałby
   katalogi producenta na stałe.
   ------------------------------------------------------------------------ */

/* Sidebar tylko tam, gdzie prowadzi gdzieś dalej: na kategorii z listą
   producentów. Strona producenta idzie na pełną szerokość, bo jej treścią
   jest długi opis i galeria całej oferty, a sidebar dublowałby kafelki.

   WYMAGANIE: kontener nadrzędny musi być Flexboxem w rzędzie, a kolumna
   treści mieć „Rozszerz” (flex-grow: 1). Wtedy po schowaniu sidebara
   treść sama zajmuje zwolnione miejsce. Przy siatce ze sztywnymi
   kolumnami zostanie puste pole po lewej. */
body:not(.elementor-editor-active):not(.ma-podkategorie) :is(#sekcja-sidebar, .sekcja-sidebar),
body:not(.elementor-editor-active):not(.ma-podkategorie) :is(#sekcja-karty, .sekcja-karty),
body:not(.elementor-editor-active):not(.ma-produkty) :is(#sekcja-produkty, .sekcja-produkty),
body:not(.elementor-editor-active):not(.ma-kat-opis) :is(#sekcja-opis, .sekcja-opis),
body:not(.elementor-editor-active):not(.ma-kat-katalogi) :is(#sekcja-katalogi-kat, .sekcja-katalogi-kat),
body:not(.elementor-editor-active):not(.ma-kat-galerie) :is(#sekcja-galeria, .sekcja-galeria),
body:not(.elementor-editor-active):not(.ma-kat-logo) :is(#sekcja-logo, .sekcja-logo) {
	display: none !important;
}

body.elementor-editor-active:not(.ma-podkategorie) :is(#sekcja-sidebar, .sekcja-sidebar),
body.elementor-editor-active:not(.ma-podkategorie) :is(#sekcja-karty, .sekcja-karty),
body.elementor-editor-active:not(.ma-produkty) :is(#sekcja-produkty, .sekcja-produkty),
body.elementor-editor-active:not(.ma-kat-katalogi) :is(#sekcja-katalogi-kat, .sekcja-katalogi-kat),
body.elementor-editor-active:not(.ma-kat-galerie) :is(#sekcja-galeria, .sekcja-galeria),
body.elementor-editor-active:not(.ma-kat-logo) :is(#sekcja-logo, .sekcja-logo) {
	outline: 2px dashed rgba(217, 190, 118, 0.9);
	outline-offset: -2px;
	opacity: 0.55;
}

/* Ukryj tytuł kategorii, gdy jest wgrane logo (zostaje dla SEO i czytników ekranu) */
body.ma-kat-logo .elementor-3971 [data-id="30c0123"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.oferta-karta,
	.oferta-karta__obraz img,
	.oferta-karta__cta,
	.kategoria-galeria__item img,
	.kategoria-logo__obraz {
		transition: none;
	}
	.oferta-karta:hover {
		transform: none;
	}
	.oferta-karta:hover .oferta-karta__obraz img,
	.kategoria-galeria__item a:hover img {
		transform: none;
	}
}

/* ==========================================================================
   Sidebar kategorii — pełne drzewo (Grupa EXPERT)
   Pod shortcode [podkategorie_produktu] -> .filtry-typy
   Bez ramki/karty. Czytelna hierarchia: kategoria > podkategorie.
   Wklej do: Elementor → Ustawienia witryny → Custom CSS
   ========================================================================== */

.filtry-typy {
	position: sticky;
	top: 96px;
}

/* --- Kategoria główna (grupa) --- */
.filtry-typy__grupa + .filtry-typy__grupa {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #E9ECEF;
}

/* Nagłówek kategorii: Okna / Bramy / Drzwi */
.filtry-typy__grupa-tytul {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.filtry-typy__grupa-tytul a {
	color: #343A40;
	text-decoration: none;
	transition: color .15s ease;
}

.filtry-typy__grupa-tytul a:hover,
.filtry-typy__grupa-tytul--aktywna a {
	color: #2F3A4A;
}

/* --- Podkategorie (wcięte pod linią prowadzącą) --- */
.filtry-typy__lista {
	list-style: none;
	margin: 8px 0 0;
	padding: 0 0 0 14px;
	border-left: 2px solid #E9ECEF;
}

.filtry-typy__item a {
	display: block;
	padding: 7px 0;
	font-size: 14px;
	font-weight: 500;
	color: #6C757D;
	text-decoration: none;
	transition: color .15s ease;
}

.filtry-typy__item a:hover {
	color: #2F3A4A;
}

/* Aktywna podkategoria — ciemna, pogrubiona, z akcentem po lewej */
.filtry-typy__item--aktywna {
	margin-left: -16px;
	padding-left: 12px;
	border-left: 2px solid #2F3A4A;
}

.filtry-typy__item--aktywna a {
	color: #2F3A4A;
	font-weight: 700;
}

/* Style siatki realizacji, shortcode [realizacje]. */
.ge-realizacje {
  --ge-primary: #2F3A4A;
  --ge-primary-hover: #3C4A5A;
  --ge-border: #e9ecef;
  --ge-text: #6c757d;
  --ge-heading: #343a40;
}

/* Pasek filtrów */
.ge-real-filtry {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--ge-border);
  border-bottom: 1px solid var(--ge-border);
  padding: 20px 0;
  margin-bottom: 32px;
}
.ge-real-grupa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ge-real-etykieta {
  font-weight: 600;
  color: var(--ge-heading);
  font-size: 14px;
  margin-right: 8px;
}

.ge-pigulka {
  border-radius: 9999px !important;
  border: 1px solid var(--ge-border);
  background: #fff !important;
  color: var(--ge-text) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px !important;
  cursor: pointer;
  transition: all .15s !important;
}
.ge-pigulka:hover {
  border-color: var(--ge-primary);
  color: var(--ge-primary) !important;
}
.ge-pigulka.aktywna {
  background: var(--ge-primary) !important;
  border-color: var(--ge-primary);
  color: #fff !important;
}

/* Linijka nad siatką: "12 realizacji, 21 zdjęć" */
.ge-real-suma {
  color: var(--ge-text);
  font-size: 14px;
  margin: -8px 0 16px;
}

/* Siatka kafelków. Punkty przełamania jak w makiecie: sm 640px, lg 1024px. */
.ge-real-siatka {
  position: relative; /* kontekst dla wyśrodkowanego .ge-real-pusto poniżej */
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-content: start;
}
@media (min-width: 640px) {
  .ge-real-siatka { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ge-real-siatka { grid-template-columns: repeat(3, 1fr); }
}
.ge-realizacja[hidden] { display: none; }

.ge-otworz {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 1px solid var(--ge-border);
  border-radius: 12px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  cursor: pointer;
  transition: box-shadow .2s !important;
  text-align: left;
}
.ge-otworz:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* Kadr 4:5, ten sam dla wszystkich zdjęć niezależnie od proporcji oryginału.
   Zdjęcia z montażu są różne: równa siatka wybacza im najwięcej. */
.ge-real-obraz {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.ge-real-obraz img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s !important;
}
.ge-otworz:hover .ge-real-obraz img { transform: scale(1.05) !important; }

.ge-real-obraz::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Trzy równe przystanki, jak domyślny gradient Tailwinda (from/via/to). */
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 50%, transparent 100%);
  pointer-events: none;
}

.ge-real-licznik {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 9999px;
}
.ge-real-licznik svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ge-real-podpisy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
}
.ge-real-model {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;
}
.ge-real-kolor {
  display: block;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}

.ge-real-pusto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ge-text);
}
.ge-real-pusto[hidden] { display: none; }

/* Lightbox */
@keyframes ge-lb-tlo {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ge-lb-karta {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ge-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15,17,21,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Animation (nie transition), bo ma się odpalać za każdym razem,
     gdy element przechodzi z display:none na flex, bez pomocy JS. */
  animation: ge-lb-tlo .2s ease-out;
}
.ge-lightbox[hidden] { display: none; }

.ge-lb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  width: 100%;
  max-height: 100%;
  animation: ge-lb-karta .25s cubic-bezier(.2,.8,.2,1);
}
.ge-lb-wrap img {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  border-radius: 10px;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.ge-lb-info {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 18px 28px;
  text-align: center;
  max-width: 480px;
}
.ge-lb-info p { margin: 0; color: #fff; }
#ge-lb-model { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
#ge-lb-meta { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.55); margin-top: 6px; }
#ge-lb-licznik { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }

.ge-lb-zamknij, .ge-lb-poprzednie, .ge-lb-nastepne {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px !important;
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border: 0;
  padding: 0 !important;
  cursor: pointer;
  transition: background .15s, transform .15s !important;
}
.ge-lb-zamknij svg, .ge-lb-poprzednie svg, .ge-lb-nastepne svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.ge-lb-zamknij:hover, .ge-lb-poprzednie:hover, .ge-lb-nastepne:hover {
  background: rgba(255,255,255,.2) !important;
  transform: scale(1.08);
}
.ge-lb-poprzednie:hover { transform: translateY(-50%) scale(1.08); }
.ge-lb-nastepne:hover { transform: translateY(-50%) scale(1.08); }
.ge-lb-zamknij { top: 16px; right: 16px; }
.ge-lb-poprzednie { left: 16px; top: 50%; transform: translateY(-50%); }
.ge-lb-nastepne { right: 16px; top: 50%; transform: translateY(-50%); }