/* ============================================================
   xinje.pl — nowa szata graficzna
   Wersja 1.6.0, 4.09.2026. Wyłącznie jednostki em (korzeń 10 px).
   Kontrasty sprawdzone liczbowo: wszystkie powyżej progu WCAG AA.
   ============================================================ */

:root{
	--xj-granat:#14202B;      /* tekst i konstrukcja — 14,9:1 na tle */
	--xj-tekst-2:#31414F;
	--xj-tekst-3:#5C6C79;
	--xj-tlo:#F2F4F2;
	--xj-plyta:#FFFFFF;
	--xj-linia:#D2D9D6;
	--xj-linia-mocna:#B4BEBA;

	--xj-blekit:#2B8FD4;      /* kolor marki: odsyłacze, ramki, akcenty */
	--xj-akcja:#1B6BA5;       /* tło przycisków — biel na tym daje 5,69:1 */

	--xj-stan:#12664B;        /* dostępność — 5,93:1 na plakietce */
	--xj-stan-tlo:#E4F0EA;
	--xj-termin:#8F5209;      /* na zamówienie — 5,40:1 */
	--xj-termin-tlo:#F7EEDF;
	--xj-alarm:#A32318;

	--xj-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* --- 1. Typografia i kolor tekstu ------------------------- */

#main,
.content-area,
.entry-content{
	color:var(--xj-granat);
}

.entry-content p,
.entry-content li{
	max-width:70ch;
}

/* Cyfry tabelaryczne wszędzie, gdzie stoją liczby.
   To jest zmiana o największym wpływie na czytelność w tej branży. */
.woocommerce-Price-amount,
.entry-content table td,
.entry-content table th,
.price,
.woocommerce-price-suffix,
.xj-cena{
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}

/* Symbol katalogowy w kroju o stałej szerokości. */
.sku,
.sku_wrapper .sku,
.xj-symbol,
.entry-content table td:first-child a[href*="/sklep/produkt/"]{
	font-family:var(--xj-mono);
	font-size:0.92em;
	letter-spacing:0.02em;
}

/* --- 2. Gęstość ------------------------------------------- */
/* Odstępy pionowe w dół o mniej więcej jedną trzecią. */

.entry-content h2{
	margin-top:1.6em;
	margin-bottom:0.5em;
	letter-spacing:-0.012em;
}
.entry-content h3{
	margin-top:1.2em;
	margin-bottom:0.4em;
}
.entry-content p{
	margin-bottom:0.75em;
}
.elementor-section.elementor-section-boxed > .elementor-container{
	padding-top:0;
	padding-bottom:0;
}

/* Wyśrodkowany akapit czyta się gorzej — oko gubi początek wiersza. */
.entry-content p[style*="text-align: center"],
.entry-content .elementor-widget-text-editor[style*="center"]{
	text-align:left !important;
}

/* --- 3. Tabele -------------------------------------------- */

.entry-content table{
	border-collapse:collapse;
	width:100%;
	font-size:0.95em;
}
.entry-content table th{
	text-align:left;
	font-family:var(--xj-mono);
	font-size:0.72em;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--xj-tekst-3);
	font-weight:500;
	border-bottom:2px solid var(--xj-linia-mocna);
	padding:0.6em 0.7em;
}
.entry-content table td{
	border-bottom:1px solid var(--xj-linia);
	padding:0.6em 0.7em;
	vertical-align:top;
}
/* Kolumna z ceną do prawej. */
.entry-content table td:last-child,
.entry-content table th:last-child{
	text-align:right;
	white-space:nowrap;
}

/* --- 4. Przyciski ----------------------------------------- */
/* Firmowy błękit zostaje kolorem marki, ale NIE jest tłem przycisku:
   biel na #2B8FD4 daje 3,51:1 i nie przechodzi progu AA. */

.button,
button.button,
.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"]{
	background-color:var(--xj-akcja);
	color:#fff;
	border-radius:0;
	letter-spacing:0.02em;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover{
	background-color:#175E92;
	color:#fff;
}
a{ color:var(--xj-akcja); }

/* Widoczny obrys skupienia — dostępność klawiaturowa. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
	outline:2px solid var(--xj-akcja);
	outline-offset:2px;
}

/* --- 5. Dostępność produktu ------------------------------- */
/* Stan nigdy nie jest niesiony samym kolorem: plakietka ma tekst,
   a znacznik ma inny kształt dla każdego stanu. */

.xj-plakietka{
	display:inline-flex;
	align-items:center;
	gap:0.4em;
	font-size:0.82em;
	font-weight:600;
	padding:0.2em 0.55em;
	border-radius:2px;
	white-space:nowrap;
}
.xj-plakietka::before{
	content:"";
	width:0.45em;
	height:0.45em;
	background:currentColor;
	flex:none;
}
.xj-plakietka--stan{ background:var(--xj-stan-tlo); color:var(--xj-stan); }
.xj-plakietka--stan::before{ border-radius:50%; }
.xj-plakietka--termin{ background:var(--xj-termin-tlo); color:var(--xj-termin); }
.xj-plakietka--termin::before{ transform:rotate(45deg); }

/* --- 6. Karta produktu ------------------------------------ */
/* Granatowy pas powtarza tytuł, który i tak jest niżej,
   i zabiera około 120 px pierwszego ekranu. */

.single-product .page-header{
	display:none;
}
.single-product .product_title{
	margin-top:0.2em;
	line-height:1.18;
	letter-spacing:-0.015em;
}
.single-product .price{
	line-height:1.25;
}
.single-product .price .woocommerce-Price-amount{
	font-weight:700;
}

/* --- 7. Kafel w kategorii --------------------------------- */

.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:0.92em;
	line-height:1.35;
	font-weight:500;
}
.woocommerce ul.products li.product .price{
	font-weight:700;
}

/* --- 8. Wartości filtrów bez wyników ---------------------- */
/* Nigdy samą przezroczystością — 42 % daje 2,22:1 i jest nieczytelne. */

.xj-filtr--pusty{
	color:var(--xj-tekst-3);
	border-style:dashed;
	background:transparent;
	cursor:not-allowed;
}

/* --- 9. Telefon ------------------------------------------- */

@media (max-width:768px){
	.entry-content table{
		display:block;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
	}
	.entry-content h2{ font-size:1.15em; }
}

/* --- 10. Stopka ------------------------------------------- */
/* Poprawka 1.1. W wersji 1.0 regula na body zabarwiala granatem
   takze teksty w ciemnej stopce: #14202B na #222222 daje 1,04:1,
   czyli tekst byl niewidoczny. Stopka ma wlasna, jasna paleta. */

#footer,
#footer-widgets,
#footer-widgets p,
#footer-widgets li,
#footer-widgets .textwidget,
#footer-bottom,
#footer-bottom p{
	color:#D7DCE0;              /* na #222222 daje 11,0:1 */
}
#footer-widgets .widget-title,
#footer-bottom strong{
	color:#FFFFFF;
}
/* Etykiety "Adres:", "Tel:", "Email:" mialy #777777 na #222222,
   czyli 3,55:1 — ponizej progu AA dla tekstu tej wielkosci. */
#footer-widgets .oceanwp-contact-title,
#footer .oceanwp-contact-title{
	color:#AEB6BD;              /* 6,44:1 */
}
#footer a,
#footer-widgets a,
#footer-bottom a{
	color:#8FC4E8;              /* 7,45:1 na #222222 */
}
#footer a:hover,
#footer-widgets a:hover,
#footer-bottom a:hover{
	color:#FFFFFF;
}
#footer-widgets .oceanwp-contact-icon,
#footer-widgets .owp-icon{
	color:#8FC4E8;
}

/* --- 11. Logo w naglowku ---------------------------------- */
/* Plik xinje-logo-2026.png ma 380 x 84 px i wchodzil w naglowek
   w pelnej wielkosci, zabierajac cala jego wysokosc. */

#site-logo #site-logo-inner a img,
#site-logo img,
.oceanwp-social-menu + #site-logo img{
	max-height:3.2em;           /* przy 14 px kontekstu daje 45 px */
	width:auto;
	height:auto;
}
@media (max-width:768px){
	#site-logo img{ max-height:2.6em; }
}

/* --- 12. Przyciski Elementora ----------------------------- */
/* Domyslnie mialy szary #69727D: biel na nim to 3,50:1, ponizej AA,
   i wygladaly na wylaczone. Przechodza na kolor akcji i rosna. */

.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button-link,
.wp-block-button__link{
	background-color:var(--xj-akcja);
	color:#fff;
	border-radius:0;
	font-size:1.05em;
	font-weight:600;
	letter-spacing:0.02em;
	padding:0.95em 1.9em;
	line-height:1.3;
	min-height:2.9em;
}
.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
.wp-block-button__link:hover{
	background-color:#175E92;
	color:#fff;
}

/* --- 13. Kafle kategorii w sklepie ------------------------ */
/* Nazwa kategorii to glowny cel klikniecia na stronie sklepu,
   a byla mniejsza od tekstu akapitowego. */

.woocommerce ul.products li.product-category a{
	display:block;
	background:var(--xj-plyta);
	border:1px solid var(--xj-linia);
	padding-bottom:0.8em;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product-category a:hover{
	border-color:var(--xj-akcja);
	box-shadow:0 0.2em 0.8em rgba(20,32,43,.10);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
	font-size:1.25em;
	font-weight:600;
	line-height:1.3;
	color:var(--xj-granat);
	padding:0.7em 0.8em 0;
	margin:0;
	text-align:left;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{
	font-family:var(--xj-mono);
	font-size:0.72em;
	font-weight:500;
	color:var(--xj-tekst-3);
	background:none;
	padding:0;
}
.woocommerce ul.products li.product-category img{
	padding:0.8em 0.8em 0;
	box-sizing:border-box;
}

/* ============================================================
   15. Warstwa nowoczesna — wersja 1.2, 4.09.2026
   Cel: wspolczesny wyglad bez przebudowy stron Elementora.
   Zmieniamy oddech, miekkosc krawedzi, glebie i reakcje na kursor,
   a nie uklad tresci. Nadal wylacznie jednostki em.
   ============================================================ */

:root{
	--xj-granat:#0F172A;
	--xj-tekst-2:#334155;
	--xj-tekst-3:#64748B;
	--xj-tlo:#F8FAFC;
	--xj-linia:#E2E8F0;
	--xj-linia-mocna:#CBD5E1;

	--xj-promien:0.5em;
	--xj-cien-1:0 0.1em 0.2em rgba(15,23,42,.05), 0 0.2em 0.6em rgba(15,23,42,.05);
	--xj-cien-2:0 0.2em 0.4em rgba(15,23,42,.06), 0 0.8em 2em rgba(15,23,42,.10);
	--xj-ruch:.18s cubic-bezier(.4,0,.2,1);
}

body{
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
h1, .entry-title, .product_title{
	letter-spacing:-0.025em;
	line-height:1.12;
	font-weight:700;
}
h2{ letter-spacing:-0.02em; line-height:1.2; font-weight:700; }
h3{ letter-spacing:-0.012em; line-height:1.3; font-weight:600; }
.entry-content p,
.elementor-widget-text-editor{ line-height:1.65; }
.elementor-icon-box-title,
.elementor-image-box-title{ letter-spacing:-0.012em; font-weight:600; }

#site-header{
	position:sticky;
	top:0;
	z-index:500;
	background:rgba(255,255,255,.88);
	backdrop-filter:saturate(1.6) blur(0.8em);
	-webkit-backdrop-filter:saturate(1.6) blur(0.8em);
	border-bottom:1px solid var(--xj-linia);
	box-shadow:none;
	transition:box-shadow var(--xj-ruch);
}
.admin-bar #site-header{ top:3.2em; }
#site-navigation-wrap .dropdown-menu > li > a{
	font-weight:500;
	border-radius:var(--xj-promien);
	transition:color var(--xj-ruch), background-color var(--xj-ruch);
}
#site-navigation-wrap .dropdown-menu > li > a:hover{ color:var(--xj-akcja); }

.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.elementor-button,
.wp-block-button__link{
	border-radius:var(--xj-promien);
	font-weight:600;
	box-shadow:0 0.1em 0.2em rgba(15,23,42,.08);
	transition:transform var(--xj-ruch), box-shadow var(--xj-ruch), background-color var(--xj-ruch);
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.elementor-button:hover,
.wp-block-button__link:hover{
	transform:translateY(-0.1em);
	box-shadow:var(--xj-cien-1);
}
.button:active, .elementor-button:active{ transform:translateY(0); box-shadow:none; }

.woocommerce ul.products li.product{
	border-radius:var(--xj-promien);
	transition:transform var(--xj-ruch), box-shadow var(--xj-ruch);
}
.woocommerce ul.products li.product:hover{ transform:translateY(-0.2em); }
.woocommerce ul.products li.product-category a{
	border-radius:var(--xj-promien);
	overflow:hidden;
	box-shadow:var(--xj-cien-1);
	border-color:transparent;
}
.woocommerce ul.products li.product-category a:hover{
	box-shadow:var(--xj-cien-2);
	border-color:transparent;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea{
	border:1px solid var(--xj-linia-mocna);
	border-radius:var(--xj-promien);
	padding:0.7em 0.9em;
	background:#fff;
	transition:border-color var(--xj-ruch), box-shadow var(--xj-ruch);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus{
	border-color:var(--xj-akcja);
	box-shadow:0 0 0 0.25em rgba(27,107,165,.14);
	outline:none;
}

.entry-content table{
	border-radius:var(--xj-promien);
	overflow:hidden;
	box-shadow:var(--xj-cien-1);
}
.entry-content table thead th{ position:sticky; top:0; background:var(--xj-tlo); z-index:2; }
.entry-content table tbody tr{ transition:background-color var(--xj-ruch); }
.entry-content table tbody tr:hover{ background:var(--xj-tlo); }

hr, .entry-content hr{ border:0; height:1px; background:var(--xj-linia); margin:2em 0; }

#footer-widgets{ border-top:1px solid rgba(255,255,255,.08); }
#footer-widgets .widget-title{
	font-size:0.8em;
	letter-spacing:0.1em;
	text-transform:uppercase;
	font-weight:600;
}

.elementor-icon-box-description,
.elementor-image-box-description{ color:var(--xj-tekst-2); }

@media (prefers-reduced-motion:reduce){
	*, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
	.button:hover, .elementor-button:hover, .woocommerce ul.products li.product:hover{ transform:none; }
}

/* ============================================================
   16. Wersja 1.3 — krok dalej w nowoczesnosc, 5.09.2026
   Trzy rzeczy: wspolczesny krok pisma, przebudowana karta
   produktu i gestszy widok listy przy setkach pozycji.
   ============================================================ */

/* --- 16.1 Krok pisma --------------------------------------
   Roboto ustepuje krojowi systemowemu. Na Windowsie to Segoe UI
   Variable, na Macu SF Pro, na Androidzie Roboto Flex — wszedzie
   krok rysowany dla ekranow, ktory nie wymaga pobierania plikow.
   Efekt uboczny: znikaja zadania sieciowe na fonty. */

:root{
	--xj-font:ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Inter, "Roboto Flex", Roboto, "Helvetica Neue", Arial, sans-serif;
	--xj-mono:ui-monospace, "Cascadia Mono", "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
}
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-widget-container,
.woocommerce-loop-product__title,
.product_title,
#site-navigation-wrap .dropdown-menu > li > a{
	font-family:var(--xj-font);
}
body{ font-feature-settings:"cv05" 1, "ss01" 1; }

/* --- 16.2 Karta produktu ----------------------------------
   Symbol katalogowy idzie nad tytul, bo to po nim inzynier
   szuka i po nim rozpoznaje pozycje. Cena dostaje wlasna plyte. */

.single-product .summary.entry-summary{
	display:flex;
	flex-direction:column;
}
.single-product .summary .product_meta{ order:1; margin:0 0 0.6em; }
.single-product .summary .product_title{ order:2; }
.single-product .summary .price{ order:3; }
.single-product .summary .woocommerce-product-details__short-description{ order:4; }
.single-product .summary form.cart{ order:5; }
.single-product .summary .yith-ywraq-add-to-quote{ order:6; }
.single-product .summary .clear{ order:9; }

.single-product .summary .product_title{
	font-size:1.9em;
	line-height:1.15;
	letter-spacing:-0.02em;
	margin:0 0 0.35em;
}
.single-product .summary .product_meta{
	font-size:0.82em;
	color:var(--xj-tekst-3);
	border:0;
	padding:0;
}
.single-product .summary .product_meta .sku{
	font-family:var(--xj-mono);
	font-size:1.05em;
	font-weight:600;
	color:var(--xj-granat);
	letter-spacing:0.01em;
}
.single-product .summary .price{
	background:var(--xj-tlo);
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:0.55em 0.7em;
	margin:0 0 1em;
	font-size:1.85em;
	line-height:1.2;
	font-weight:700;
	color:var(--xj-granat);
	font-variant-numeric:tabular-nums;
}
.single-product .summary .price .woocommerce-price-suffix,
.single-product .summary .price small{
	display:block;
	font-size:0.45em;
	font-weight:500;
	color:var(--xj-tekst-3);
	letter-spacing:0.01em;
}
.single-product .summary form.cart{ margin-bottom:1em; }
.single-product .summary form.cart .single_add_to_cart_button{
	font-size:1.05em;
	padding:0.9em 2em;
	min-height:3em;
}
.single-product .summary .quantity input[type="number"]{
	min-height:3em;
	text-align:center;
	font-variant-numeric:tabular-nums;
}
.single-product table.shop_attributes{
	border-collapse:collapse;
	width:100%;
}
.single-product table.shop_attributes th{
	width:36%;
	text-align:left;
	font-weight:500;
	font-size:0.85em;
	letter-spacing:0.02em;
	color:var(--xj-tekst-3);
	background:var(--xj-tlo);
	padding:0.55em 0.8em;
	border-bottom:1px solid var(--xj-linia);
}
.single-product table.shop_attributes td{
	padding:0.55em 0.8em;
	border-bottom:1px solid var(--xj-linia);
	font-variant-numeric:tabular-nums;
}
.single-product table.shop_attributes td p{ margin:0; }

/* --- 16.3 Gestszy widok listy -----------------------------
   Kafel mial 496 px wysokosci; przy 166 pozycjach w jednej
   podkategorii to cztery ekrany na dwanascie produktow.
   Skracamy opis do dwoch wierszy i zbijamy odstepy. */

.woocommerce ul.products li.product .woo-entry-inner li.category{
	font-size:0.72em;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--xj-tekst-3);
	margin-bottom:0.15em;
}
.woocommerce ul.products li.product .woo-entry-inner li.title{
	margin-bottom:0.3em;
}
.woocommerce ul.products li.product .woo-entry-inner li.title h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:1.05em;
	line-height:1.3;
	font-weight:600;
	letter-spacing:-0.008em;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.woocommerce ul.products li.product .woo-entry-inner li.rating:empty{ display:none; }
.woocommerce ul.products li.product .woo-entry-inner li.woo-desc{
	font-size:0.85em;
	line-height:1.45;
	color:var(--xj-tekst-2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-bottom:0.5em;
}
.woocommerce ul.products li.product .woo-entry-inner li.price-wrap{
	margin-bottom:0.5em;
}
.woocommerce ul.products li.product .price{
	font-size:1.1em;
	font-weight:700;
	color:var(--xj-granat);
	font-variant-numeric:tabular-nums;
	line-height:1.25;
}
.woocommerce ul.products li.product .price .woocommerce-price-suffix,
.woocommerce ul.products li.product .price small{
	display:block;
	font-size:0.72em;
	font-weight:500;
	color:var(--xj-tekst-3);
}
.woocommerce ul.products li.product .btn-wrap .button{
	width:100%;
	padding:0.7em 1em;
	font-size:0.92em;
}
.woocommerce ul.products li.product .woo-entry-inner{
	padding-top:0.6em;
}

/* Cztery kolumny na szerokich ekranach zamiast trzech. */
@media (min-width:1500px){
	.woocommerce ul.products.grid li.product.col.span_1_of_3{
		width:25%;
	}
}

/* --- 17. Domykanie kontrastow po 1.3 ------------------------
   Pomiar na karcie produktu i liscie wykazal kilka miejsc,
   gdzie OceanWP zostawia jasne szarosci ponizej progu AA. */

/* Nadtytul kategorii w kaflu mial #ABABAB: 2,30:1. */
.woocommerce ul.products li.product .woo-entry-inner li.category,
.woocommerce ul.products li.product .woo-entry-inner li.category a{
	color:var(--xj-tekst-3);
}

/* Przycisk w kaflu byl obrysowy i wygladal na wylaczony. */
.woocommerce ul.products li.product .btn-wrap .button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple{
	background-color:var(--xj-akcja);
	border-color:var(--xj-akcja);
	color:#fff;
}
.woocommerce ul.products li.product .btn-wrap .button:hover{
	background-color:#175E92;
	border-color:#175E92;
	color:#fff;
}

/* Metryczka produktu: odsylacz kategorii i etykiety. */
.single-product .summary .product_meta{ color:var(--xj-tekst-2); font-size:0.85em; }
.single-product .summary .product_meta a{ color:var(--xj-akcja); }

/* Maly tekst na tinowanych tlach potrzebuje ciemniejszej szarosci:
   #64748B na #F5F7FA daje 4,43:1, czyli tuz ponizej progu. */
.single-product .summary .price .woocommerce-price-suffix,
.single-product .summary .price small,
.single-product table.shop_attributes th,
.woocommerce ul.products li.product .price .woocommerce-price-suffix,
.woocommerce ul.products li.product .price small,
.xj-info,
.woocommerce-message, .woocommerce-info{
	color:var(--xj-tekst-2);
}

/* Zakladki pod opisem: #13AFF0 dawal 2,49:1, #999999 — 2,85:1. */
.woocommerce-tabs ul.tabs li a{
	color:var(--xj-tekst-2);
	font-weight:500;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover{
	color:var(--xj-granat);
}
.woocommerce-tabs ul.tabs li.active{
	border-bottom:2px solid var(--xj-akcja);
}

/* Cena w kaflu i na karcie: zielen OceanWP na bieli bywa slaba,
   a liczba jest najwazniejsza — idzie na grafit. */
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.single-product .summary .price .amount,
.single-product .summary .price bdi{
	color:var(--xj-granat);
}


/* ============================================================
   18. Kontrast - domkniecie (v1.3.2)
   OceanWP celuje w zakladki selektorem
   .woocommerce div.product .woocommerce-tabs ul.tabs li a (0,3,3),
   wiec sekcja 17 przegrywala. Tutaj podnosimy swoistosc.
   ============================================================ */

body .woocommerce div.product .woocommerce-tabs ul.tabs li a,
body .woocommerce #content div.product .woocommerce-tabs ul.tabs li a{
	color:var(--xj-tekst-2);
}

body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a{
	color:var(--xj-granat);
}

body .woocommerce table.shop_attributes th,
body .single-product table.shop_attributes th,
body .woocommerce div.product table.shop_attributes th{
	color:var(--xj-tekst-2);
}

body .woocommerce table.shop_attributes td,
body .single-product table.shop_attributes td{
	color:var(--xj-granat);
}


/* ============================================================
   19. Kontrast - specyficznosc (v1.3.3)
   Arkusz oceanwp-woocommerce wczytuje sie PO motywie potomnym,
   wiec przy rownej swoistosci wygrywa. Prefiks html podnosi
   nasza swoistosc o jeden element i domyka sprawe.
   ============================================================ */

html .woocommerce div.product .woocommerce-tabs ul.tabs li a{
	color:var(--xj-tekst-2);
}

html .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
html .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
	color:var(--xj-granat);
}

html .entry-content table th,
html .entry-content table.xinje-spec th,
html .woocommerce table.shop_attributes th{
	color:var(--xj-tekst-2);
}

html .woocommerce div.quantity a.plus,
html .woocommerce div.quantity a.minus,
html .woocommerce .quantity a.plus,
html .woocommerce .quantity a.minus{
	color:var(--xj-tekst-2);
}


/* ============================================================
   20. Kontrast - naglowek i przelacznik widoku (v1.3.4)
   ============================================================ */

html .woocommerce .result-count li a,
html .woocommerce .result-count a.view-first,
html .woocommerce .result-count a.view-second,
html .woocommerce .result-count a.view-all,
html a.view-first,
html a.view-second,
html a.view-all,
html .oceanwp-grid-list a{
	color:var(--xj-tekst-2);
}

html .woocommerce .result-count li a.active,
html a.view-first.active,
html a.view-second.active,
html a.view-all.active,
html .oceanwp-grid-list a.active{
	color:var(--xj-granat);
}

/* Licznik koszyka: biel na #13AFF0 dawala 2,49:1. */
html .wcmenucart-details,
html .wcmenucart-details.count,
html #site-header .wcmenucart-details{
	background-color:var(--xj-akcja);
	color:#FFFFFF;
}


/* ============================================================
   21. Kontrast - sortowanie w katalogu (v1.3.6)
   ============================================================ */

html .theme-select,
html .theme-selectInner,
html .woocommerce-ordering .theme-select,
html .woocommerce-ordering .theme-selectInner,
html .orderby .theme-selectInner{
	color:var(--xj-tekst-2);
}


/* ============================================================
   22. Kontakt - formularz WPForms (v1.3.8)
   Gwiazdka pola wymaganego byla czysta czerwienia (4,00:1),
   a przycisk wysylki biela na #13AFF0 (2,49:1). WPForms i OceanWP
   trzymaja te dwie wlasciwosci wysoka swoistoscia i !important,
   wiec tu wyjatkowo odpowiadamy tym samym.
   ============================================================ */

html div.wpforms-container-full .wpforms-form .wpforms-required-label,
html .wpforms-container .wpforms-required-label{
	color:#B42318 !important;
}

html div.wpforms-container-full .wpforms-form button[type="submit"],
html .wpforms-container .wpforms-form button[type="submit"],
html .wpforms-container button.wpforms-submit{
	background-color:var(--xj-akcja) !important;
	border-color:var(--xj-akcja) !important;
	color:#FFFFFF !important;
	border-radius:var(--xj-promien);
	transition:background-color var(--xj-ruch);
}

html div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
html .wpforms-container button.wpforms-submit:hover,
html .wpforms-container button.wpforms-submit:focus{
	background-color:var(--xj-granat) !important;
	border-color:var(--xj-granat) !important;
}


/* ============================================================
   23. Rowna linia przyciskow w siatce (v1.3.9)
   Dluzszy tytul (3 wiersze zamiast 2) podnosil kafelek o 21 px
   i lamal linie przyciskow "Dodaj do koszyka". Tytul dostaje
   staly obszar dwoch wierszy.
   ============================================================ */

html .woocommerce ul.products li.product .woo-entry-inner li.title{
	min-height:2.9em;
}

html .woocommerce ul.products li.product .woo-entry-inner li.title h2,
html .woocommerce ul.products li.product .woo-entry-inner li.title a{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}


/* ============================================================
   24. Pasek filtrow nad siatka (v1.4.0)
   Celowo NIE jest karta: to pas na tle strony zamkniety dwiema
   liniami wloskowymi. Mniej rzeczy udaje osobny obiekt, wiec
   kafelki produktow zostaja jedynymi kartami w tym widoku.
   ============================================================ */

.xj-filtry{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:0.8em 1.2em;
	overflow-x:auto;
	overflow-y:hidden;
	scrollbar-width:thin;
	-webkit-overflow-scrolling:touch;
	margin:0 0 1.8em;
	padding:0.9em 0;
	border-top:1px solid var(--xj-linia);
	border-bottom:1px solid var(--xj-linia);
}

.xj-filtry__pole{ display:flex; align-items:center; gap:0.5em; flex:0 0 auto; }

.xj-filtry__pole label{
	font-size:0.85em;
	font-weight:600;
	color:var(--xj-tekst-2);
	letter-spacing:0.01em;
	white-space:nowrap;
}

html .xj-filtry select{
	font:inherit;
	font-size:0.9em;
	color:var(--xj-granat);
	background-color:var(--xj-plyta);
	border:1px solid var(--xj-linia-mocna);
	border-radius:var(--xj-promien);
	padding:0.42em 2.1em 0.42em 0.75em;
	line-height:1.3;
	-webkit-appearance:none;
	appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2331414F' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 0.7em center;
	transition:border-color var(--xj-ruch);
	max-width:12em;
	text-overflow:ellipsis;
}

html .xj-filtry select:hover{ border-color:var(--xj-tekst-3); }
html .xj-filtry select:focus-visible{
	outline:2px solid var(--xj-akcja);
	outline-offset:1px;
	border-color:var(--xj-akcja);
}

html .xj-filtry .xj-filtry__ok{
	font:inherit;
	font-size:0.88em;
	font-weight:600;
	color:var(--xj-tekst-2);
	background:transparent;
	border:1px solid var(--xj-linia-mocna);
	border-radius:var(--xj-promien);
	padding:0.45em 1.05em;
	cursor:pointer;
	transition:background-color var(--xj-ruch), color var(--xj-ruch);
}
html .xj-filtry .xj-filtry__ok:hover{
	background:var(--xj-akcja);
	border-color:var(--xj-akcja);
	color:#FFFFFF;
}

html .xj-filtry .xj-filtry__czysc{
	font-size:0.88em;
	font-weight:600;
	color:var(--xj-akcja);
	text-decoration:underline;
	text-underline-offset:0.2em;
}

.xj-filtry__licz{
	margin-left:auto;
	flex:0 0 auto;
	padding-left:0.6em;
	font-size:0.88em;
	color:var(--xj-tekst-2);
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
.xj-filtry__licz b{ color:var(--xj-granat); font-weight:700; }

/* Na waskich ekranach pasek nie lamie sie na wiersze, tylko
   przewija w poziomie — etykiety zostaja przy swoich listach. */
@media (max-width:768px){
	.xj-filtry{ gap:0.7em 1em; padding-bottom:1.1em; }
	.xj-filtry__licz{ margin-left:1.2em; }
}


/* ============================================================
   25. Korekta gestosci (v1.4.0)
   Wszystko bylo biala karta z cieniem na jasnym tle, wiec przy
   dluzszej stronie hierarchia znikala. Cien zostaje tylko tam,
   gdzie cos naprawde jest podniesione — pod kursorem. Reszta
   oddziela sie linia wloskowa.
   ============================================================ */

html .woocommerce ul.products li.product{
	box-shadow:none;
	border:1px solid var(--xj-linia);
	transition:border-color var(--xj-ruch), box-shadow var(--xj-ruch);
}

html .woocommerce ul.products li.product:hover{
	border-color:var(--xj-linia-mocna);
	box-shadow:var(--xj-cien-1);
}

html .woocommerce .woocommerce-info,
html .woocommerce .woocommerce-message{
	box-shadow:none;
	border:0;
	border-left:3px solid var(--xj-akcja);
	border-radius:0;
	background:var(--xj-tlo);
}


/* ============================================================
   26. Drugi ton powierzchni (v1.4.1)
   Diagnoza: cala strona katalogu byla biala — tlo, karta i
   kadr zdjecia mialy dokladnie ten sam kolor #FFFFFF, wiec
   zdejmowanie cienia niczego nie zmienialo. Dopiero podklad
   pod siatka sprawia, ze karta jest kartą.
   ============================================================ */

body.post-type-archive-product,
body.tax-product_cat,
body.woocommerce-shop{
	background-color:#EDF1F5;
}

html body.post-type-archive-product .woocommerce ul.products li.product,
html body.tax-product_cat .woocommerce ul.products li.product,
html body.woocommerce-shop .woocommerce ul.products li.product{
	background-color:#FFFFFF;
}

/* Kadr zdjecia: bialy sterownik na bialej karcie nie mial krawedzi. */
html body.post-type-archive-product .woocommerce ul.products li.product .woo-entry-image-swap,
html body.tax-product_cat .woocommerce ul.products li.product .woo-entry-image-swap,
html body.woocommerce-shop .woocommerce ul.products li.product .woo-entry-image-swap{
	background-color:#F6F8FA;
	border-bottom:1px solid var(--xj-linia);
}

/* Widgety w bocznej kolumnie tez musza byc kartami,
   inaczej wisza na podkladzie. */
html body.post-type-archive-product #right-sidebar .sidebar-box,
html body.tax-product_cat #right-sidebar .sidebar-box,
html body.woocommerce-shop #right-sidebar .sidebar-box,
html body.post-type-archive-product #left-sidebar .sidebar-box,
html body.tax-product_cat #left-sidebar .sidebar-box,
html body.woocommerce-shop #left-sidebar .sidebar-box{
	background-color:#FFFFFF;
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:1.2em 1.3em;
	margin-bottom:1.4em;
}


/* ============================================================
   27. Drugi ton: karta produktu, wpisy, strona glowna (v1.4.2)
   Ta sama zasada co w sekcji 26, rozszerzona na pozostale
   szablony. Zmierzone przed napisaniem: na wszystkich trzech
   kazda warstwa malowala #FFFFFF.
   ============================================================ */

/* --- karta produktu --- */
body.single-product{ background-color:#EDF1F5; }

html body.single-product #primary div.product{
	background-color:#FFFFFF;
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:1.8em 2em 2em;
}

html body.single-product #right-sidebar .sidebar-box{
	background-color:#FFFFFF;
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:1.2em 1.3em;
	margin-bottom:1.4em;
}

/* --- wpis i lista wpisow --- */
body.single-post,
body.blog,
body.archive.category{ background-color:#EDF1F5; }

html body.single-post #primary article,
html body.blog #primary .blog-entry,
html body.archive.category #primary .blog-entry{
	background-color:#FFFFFF;
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:1.8em 2em 2em;
}

html body.single-post #right-sidebar .sidebar-box,
html body.blog #right-sidebar .sidebar-box,
html body.archive.category #right-sidebar .sidebar-box{
	background-color:#FFFFFF;
	border:1px solid var(--xj-linia);
	border-radius:var(--xj-promien);
	padding:1.2em 1.3em;
	margin-bottom:1.4em;
}

/* --- strona glowna: rytm pasow zamiast jednolitej bieli --- */
html body.home .elementor-top-section:nth-of-type(even){
	background-color:#F1F5F9;
}


/* ============================================================
   28. Poprawka regresji z sekcji 19 (v1.4.3)
   Sekcja 19 ustawiala kolor dla kazdego th w tresci wpisu i
   przebijala arkusz xj-wiedza, ktory daje naglowkom tabeli
   xinje-spec granatowe tlo z biala czcionka. Efekt: 1,68:1.
   ============================================================ */

html .entry-content table.xinje-spec thead th,
html table.xinje-spec thead th,
html body.single-post table.xinje-spec thead th{
	color:#FFFFFF;
}


/* ============================================================
   29. Poprawka sekcji 26 (v1.4.4)
   W sekcji 26 napisalem "body.tax-product_cat .woocommerce ...",
   a klasa woocommerce siedzi na samym BODY — selektor wymagal
   wiec potomka z ta klasa i nigdy nie pasowal. Kafelki zostaly
   przezroczyste, przez co drobny tekst wyladowal na podkladzie
   (4,19:1). Tu bez posrednika .woocommerce.
   ============================================================ */

html body.tax-product_cat ul.products li.product,
html body.post-type-archive-product ul.products li.product,
html body.woocommerce-shop ul.products li.product{
	background-color:#FFFFFF;
}

html body.tax-product_cat ul.products li.product .woo-entry-image-swap,
html body.post-type-archive-product ul.products li.product .woo-entry-image-swap,
html body.woocommerce-shop ul.products li.product .woo-entry-image-swap{
	background-color:#F6F8FA;
	border-bottom:1px solid var(--xj-linia);
}


/* ============================================================
   30. Pasek filtrow w pasku narzedzi OceanWP (v1.4.5)
   Hak woocommerce_before_shop_loop wypada wewnatrz kontenera
   .oceanwp-toolbar, wiec formularz doklejal sie do wiersza
   z sortowaniem. Tu dostaje wlasny wiersz na calej szerokosci.
   ============================================================ */

html .oceanwp-toolbar .xj-filtry{
	clear:both;
	float:none;
	width:100%;
	margin:1.1em 0 0;
}

html .xj-filtry .xj-filtry__ok{
	text-transform:none;
	letter-spacing:0;
	line-height:1.3;
}


/* ============================================================
   31. Naglowek kategorii: rzad faktow i szyna serii (v1.5.0)
   Fakty nie sa kaflami, tylko rzedem par etykieta/wartosc
   rozdzielonym liniami wloskowymi — pudelka zostaja dla
   produktow. Szyna serii przejmuje nawigacyjna role kolumny
   bocznej, ktora zniknela z archiwow.
   ============================================================ */

.xj-kat{ margin:0 0 1.7em; }

html .term-description,
html .xj-kat__lead{
	font-size:1.02em;
	line-height:1.6;
	color:var(--xj-tekst-2);
	max-width:62em;
	margin:0 0 1.2em;
}

.xj-kat__fakty{
	list-style:none;
	margin:0 0 1.2em;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	border-top:1px solid var(--xj-linia);
	border-bottom:1px solid var(--xj-linia);
}

.xj-kat__fakty li{
	margin:0;
	padding:0.85em 1.7em 0.85em 0;
	display:flex;
	flex-direction:column;
	gap:0.12em;
	border-right:1px solid var(--xj-linia);
}

.xj-kat__fakty li + li{ padding-left:1.7em; }
.xj-kat__fakty li:last-child{ border-right:0; padding-right:0; }

.xj-kat__fakty b{
	font-size:1.4em;
	font-weight:700;
	line-height:1.15;
	letter-spacing:-0.012em;
	color:var(--xj-granat);
	font-variant-numeric:tabular-nums;
}

.xj-kat__fakty span{
	font-size:0.76em;
	font-weight:600;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--xj-tekst-3);
}

.xj-kat__szyna{ display:flex; flex-wrap:wrap; gap:0.5em; }

html .xj-kat__s{
	display:inline-flex;
	align-items:baseline;
	gap:0.45em;
	border:1px solid var(--xj-linia-mocna);
	border-radius:999px;
	padding:0.42em 0.95em;
	font-size:0.88em;
	font-weight:600;
	color:var(--xj-tekst-2);
	background:var(--xj-plyta);
	text-decoration:none;
	transition:border-color var(--xj-ruch), color var(--xj-ruch), background-color var(--xj-ruch);
}

html .xj-kat__s:hover{ border-color:var(--xj-akcja); color:var(--xj-akcja); }

html .xj-kat__s u{
	text-decoration:none;
	font-weight:500;
	font-size:0.85em;
	color:var(--xj-tekst-3);
	font-variant-numeric:tabular-nums;
}

html .xj-kat__s--akt,
html .xj-kat__s--akt:hover{
	background:var(--xj-akcja);
	border-color:var(--xj-akcja);
	color:#FFFFFF;
}
html .xj-kat__s--akt u{ color:rgba(255,255,255,0.82); }

/* Tytul archiwum: grafit i wieksza waga zamiast szarosci 400. */
html .page-header .page-header-title,
html .page-header-title{
	color:var(--xj-granat);
	font-weight:700;
	letter-spacing:-0.02em;
}

@media (max-width:768px){
	.xj-kat__fakty li{ padding-right:1.1em; }
	.xj-kat__fakty li + li{ padding-left:1.1em; }
	.xj-kat__fakty b{ font-size:1.2em; }
}


/* ============================================================
   32. Drugi glos: krój maszynowy dla danych (v1.5.1)
   Liczby i wartosci parametrow dostaja mono, proza zostaje
   na kroju podstawowym. To odroznia dane od opisu i pomaga
   skanowac dluga liste modeli.
   ============================================================ */

html .xj-kat__fakty b.xj-liczba{
	font-family:var(--xj-mono);
	letter-spacing:-0.01em;
	font-size:1.3em;
}

html .woocommerce ul.products li.product .woo-entry-inner li.category{
	font-family:var(--xj-mono);
	font-size:0.78em;
	font-weight:500;
	letter-spacing:0.06em;
	text-transform:uppercase;
	font-style:normal;
}

html .single-product table.shop_attributes td,
html .entry-content table.xinje-spec td{
	font-family:var(--xj-mono);
	font-size:0.92em;
}

html .xj-filtry select{
	font-family:var(--xj-mono);
	font-size:0.85em;
}


/* ============================================================
   33. Plakietki stanu w kafelku (v1.5.1)
   Kolor niesie informacje, nie ozdobe: dostepnosc, wycena
   indywidualna, nowosc. Reszta siatki zostaje jednobarwna.
   ============================================================ */

html .woocommerce ul.products li.product .xj-stan{
	display:flex;
	flex-wrap:wrap;
	gap:0.35em;
	margin:0 0 0.45em;
	padding:0;
}

.xj-stan__p{
	display:inline-flex;
	align-items:center;
	font-size:0.72em;
	font-weight:700;
	letter-spacing:0.05em;
	text-transform:uppercase;
	border-radius:0.3em;
	padding:0.25em 0.55em;
	line-height:1.35;
}

.xj-stan__p--stan{   background:var(--xj-stan-tlo);   color:var(--xj-stan); }
.xj-stan__p--termin{ background:var(--xj-termin-tlo); color:var(--xj-termin); }
.xj-stan__p--nowosc{ background:#E4EEF6;              color:var(--xj-akcja); }
.xj-stan__p--zwykla{ background:var(--xj-tlo);        color:var(--xj-tekst-2); }

/* Zielen OceanWP na cenie nie nalezy do palety — normalizujemy,
   zanim wyjdzie na wierzch przy zmianie szablonu. */
html .woocommerce ul.products li.product .price .woocommerce-Price-amount,
html .single-product .summary .price .woocommerce-Price-amount{
	color:var(--xj-granat);
}


/* ============================================================
   34. Domkniecie kontrastu po sekcjach 31-33 (v1.5.3)
   Etykiety w rzedzie faktow siedza na podkladzie #EDF1F5,
   gdzie --xj-tekst-3 daje 4,19:1. Licznik w aktywnej pastylce
   mial biel 82% na #1B6BA5, czyli 4,40:1.
   ============================================================ */

html .xj-kat__fakty span{
	color:var(--xj-tekst-2);
}

html .xj-kat__s--akt u{
	color:#FFFFFF;
	opacity:0.9;
}


/* ============================================================
   35. Plakietka jako naklejka na kadrze (v1.5.4)
   Hak wypada przed obrazkiem, wiec plakietka lezala na gornej
   krawedzi karty. Tutaj laduje w rogu kadru.
   ============================================================ */

html .woocommerce ul.products li.product{ position:relative; }

html .woocommerce ul.products li.product .xj-stan{
	position:absolute;
	top:0.7em;
	left:0.7em;
	z-index:3;
	margin:0;
	display:flex;
	gap:0.35em;
	pointer-events:none;
}

.xj-stan__p{
	box-shadow:0 1px 2px rgba(20,32,43,0.10);
}


/* ------------------------------------------------------------------
   36. Zdjecie kontekstowe w naglowku kategorii (partia A).
   Pasek, nie baner: niski, na calej szerokosci kolumny tresci,
   obwiedziony ta sama wloskowata kreska co karty produktow.
   Zadnego tekstu na zdjeciu, wiec nie wnosi ryzyka kontrastu.
   ------------------------------------------------------------------ */
html .xj-kat__foto {
	margin: 0 0 1.4em;
	padding: 0;
	border: 1px solid var(--xj-linia);
	background-color: var(--xj-plyta);
	overflow: hidden;
	line-height: 0;
}

html .xj-kat__foto .xj-kat__foto-img {
	display: block;
	width: 100%;
	height: 15em;
	object-fit: cover;
	object-position: center 45%;
}

@media ( max-width: 60em ) {
	html .xj-kat__foto .xj-kat__foto-img { height: 11em; }
}

@media ( max-width: 40em ) {
	html .xj-kat__foto .xj-kat__foto-img { height: 8.5em; }
}