/* Sekcja kategorii i pasek producentow na stronie glownej.
   Uklad jest elastyczny, nie siatkowy, zeby ostatni rzad ustawial sie na srodku,
   a nie zostawial pojedynczej karty przy lewej krawedzi. */

.peptyd-kategorie,
.peptyd-producenci {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}

.peptyd-producenci {
	margin-top: 40px;
}

.peptyd-producenci__naglowek {
	margin: 0 0 18px;
	color: #0022a8;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

.peptyd-kategorie__lista,
.peptyd-producenci__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.peptyd-kategorie__pozycja {
	flex: 0 1 190px;
	max-width: 190px;
}

.peptyd-producenci__pozycja {
	flex: 0 1 170px;
	max-width: 170px;
}

.peptyd-kategorie__karta,
.peptyd-producenci__karta {
	display: block;
	padding: 8px 6px 14px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.peptyd-kategorie__obraz,
.peptyd-producenci__obraz {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto 12px;
	padding: 5px;
	border: 2px solid #0022a8;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.peptyd-producenci__obraz {
	width: 104px;
	height: 104px;
}

.peptyd-kategorie__obraz img,
.peptyd-producenci__obraz img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.peptyd-kategorie__karta:hover .peptyd-kategorie__obraz,
.peptyd-producenci__karta:hover .peptyd-producenci__obraz {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 34, 168, 0.18);
}

.peptyd-kategorie__nazwa,
.peptyd-producenci__nazwa {
	display: block;
	color: #0022a8;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.peptyd-producenci__nazwa {
	font-size: 14px;
	letter-spacing: 0.02em;
}

.peptyd-kategorie__liczba,
.peptyd-producenci__liczba {
	display: block;
	margin-top: 4px;
	color: #767676;
	font-size: 12px;
}

@media (max-width: 1024px) {
	.peptyd-kategorie__pozycja {
		flex: 0 1 165px;
		max-width: 165px;
	}

	.peptyd-kategorie__obraz {
		width: 116px;
		height: 116px;
	}
}

@media (max-width: 767px) {
	.peptyd-kategorie__lista,
	.peptyd-producenci__lista {
		gap: 18px 12px;
	}

	.peptyd-kategorie__pozycja {
		flex: 0 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
	}

	.peptyd-producenci__pozycja {
		flex: 0 1 calc(33.333% - 8px);
		max-width: calc(33.333% - 8px);
	}

	.peptyd-kategorie__obraz {
		width: 104px;
		height: 104px;
		margin-bottom: 10px;
	}

	.peptyd-producenci__obraz {
		width: 76px;
		height: 76px;
		padding: 4px;
	}

	.peptyd-kategorie__nazwa {
		font-size: 13px;
	}

	.peptyd-producenci__nazwa {
		font-size: 11px;
	}

	.peptyd-kategorie__liczba,
	.peptyd-producenci__liczba {
		font-size: 11px;
	}
}

/* =========================================================================
   Naglowek, stopka i slider. Wlaczaja sie dopiero wtedy, gdy Elementor Pro
   nie renderuje juz szablonow Theme Buildera - patrz peptyd-wyglad.php.
   Kolory sa te same, ktore mial szablon Pro: pasek #A8CAE4, tekst i obramowania
   #0022A8, przycisk slidera #0172BE.
   ========================================================================= */

.peptyd-naglowek {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #a8cae4;
}

.peptyd-naglowek__pasek {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 8px 20px;
}

.peptyd-naglowek__pasek--maly {
	display: none;
	justify-content: space-between;
	gap: 10px;
}

.peptyd-naglowek__logo {
	display: block;
	line-height: 0;
}

.peptyd-naglowek__logo img {
	display: block;
	width: auto;
	max-width: 240px;
	height: auto;
}

.peptyd-naglowek__nawigacja {
	flex: 1 1 auto;
}

.peptyd-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.peptyd-menu a {
	display: block;
	padding: 6px 2px;
	color: #0022a8;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.peptyd-menu a:hover,
.peptyd-menu .current-menu-item > a {
	text-decoration: underline;
}

.peptyd-menu .sub-menu {
	display: none;
}

.peptyd-naglowek__kolumna--akcje {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

/* Kafelki prowadzace do innych stron: katalog i strony grup.
   Trzymaja sie tego samego jezyka co karty kategorii na stronie glownej:
   bialy kafelek, granatowy akcent, delikatne uniesienie pod kursorem.
   Zdjecie siedzi na jasnym tle we wlasnej ramce, dzieki czemu fotografie
   fiolek o roznych proporcjach ustawiaja sie w jednej linii. */
.peptyd-strony-kafelki {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;
	margin: 32px 0;
	padding: 0;
	list-style: none;
}

.peptyd-strona-kafelek {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e3e6ec;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.peptyd-strona-kafelek:hover,
.peptyd-strona-kafelek:focus-within {
	transform: translateY(-3px);
	border-color: #0022a8;
	box-shadow: 0 10px 24px rgba(0, 34, 168, 0.16);
}

.peptyd-strona-kafelek__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Klikalny ma byc caly kafelek, nie sam tytul. Robi to nakladka na odnosniku,
   zamiast przebudowy znacznikow - opis zostaje poza odnosnikiem, wiec czytnik
   ekranu nie czyta go jako czesci nazwy, a mysz i tak trafia w cel. */
.peptyd-strona-kafelek__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.peptyd-strona-kafelek__obraz {
	display: block;
	padding: 20px;
	border-bottom: 1px solid #eef0f5;
	background: #f6f7fb;
}

/* Kafelek bez zdjecia mialby tu pusta szara ramke. Dzis takich nie ma,
   ale wystarczy jeden produkt bez fotografii, zeby sie pojawila. */
.peptyd-strona-kafelek__obraz:empty {
	display: none;
}

.peptyd-strona-kafelek__obraz img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0;
	transition: transform 0.25s ease;
}

.peptyd-strona-kafelek:hover .peptyd-strona-kafelek__obraz img {
	transform: scale(1.04);
}

.peptyd-strona-kafelek__nazwa {
	display: block;
	margin: 0;
	padding: 16px 18px 0;
	color: #0022a8;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.peptyd-strona-kafelek__nazwa::after {
	content: " \203A";
	color: #0022a8;
	font-weight: 700;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.peptyd-strona-kafelek:hover .peptyd-strona-kafelek__nazwa {
	text-decoration: underline;
}

.peptyd-strona-kafelek:hover .peptyd-strona-kafelek__nazwa::after {
	opacity: 1;
}

/* Opis przyciety do trzech wierszy. Bez tego kafelki mialy rozna wysokosc
   tekstu i dolna krawedz siatki robila sie postrzepiona. */
.peptyd-strona-kafelek__opis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 8px 0 0;
	padding: 0 18px 18px;
	color: #4b5563;
	font-size: 13.5px;
	line-height: 1.55;
}

@media (max-width: 600px) {
	.peptyd-strony-kafelki {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 18px;
	}

	.peptyd-strona-kafelek__obraz {
		padding: 14px;
	}
}

@media (max-width: 420px) {
	.peptyd-strony-kafelki {
		grid-template-columns: 1fr;
	}
}

/* Ruch pod kursorem jest ozdoba, wiec ustepuje ustawieniu systemowemu. */
@media (prefers-reduced-motion: reduce) {
	.peptyd-strona-kafelek,
	.peptyd-strona-kafelek__obraz img {
		transition: none;
	}

	.peptyd-strona-kafelek:hover,
	.peptyd-strona-kafelek:focus-within {
		transform: none;
	}

	.peptyd-strona-kafelek:hover .peptyd-strona-kafelek__obraz img {
		transform: none;
	}
}

/* Zdanie o wysylce zagranicznej w koszyku i przy podsumowaniu kasy. */
.peptyd-uwaga-wysylka td {
	padding-top: 4px;
	color: #4b5563;
	font-size: 13px;
	line-height: 1.5;
}

/* Blok zakupu na stronach obcojezycznych. Wyglada jak kafelek w sklepie,
   bo tabela z malym odnoszikiem "Buy" po prostu ginela w tekscie. */
.peptyd-kup-kafelki {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 22px;
	margin: 32px 0;
	padding: 0;
	list-style: none;
}

.peptyd-kup-kafelek {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid #e3e6ec;
	border-radius: 6px;
	background: #fff;
	text-align: center;
}

.peptyd-kup-kafelek__obraz img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.peptyd-kup-kafelek__odnosnik {
	color: inherit;
	text-decoration: none;
}

.peptyd-kup-kafelek__odnosnik:hover {
	color: #0022a8;
	text-decoration: underline;
}

.peptyd-kup-kafelek__nazwa {
	margin: 14px 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.peptyd-kup-kafelek__cena {
	margin-bottom: 6px;
	color: #0022a8;
	font-size: 20px;
	font-weight: 700;
}

.peptyd-kup-kafelek__cena del {
	color: #6b7280;
	font-size: 16px;
	font-weight: 400;
}

.peptyd-kup-kafelek__stan {
	margin-bottom: 14px;
	color: #4b5563;
	font-size: 13px;
}

.peptyd-kup-kafelek__stan p {
	margin: 0;
}

.peptyd-kup-kafelek__przycisk {
	display: block;
	margin-top: auto;
	padding: 14px 18px;
	border-radius: 4px;
	background: #0022a8;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
}

.peptyd-kup-kafelek__przycisk:hover,
.peptyd-kup-kafelek__przycisk:focus {
	background: #001a80;
	color: #fff;
}

.peptyd-kup-kafelek__przycisk--brak {
	background: #e5e7eb;
	color: #6b7280;
	cursor: default;
}

@media (max-width: 480px) {
	.peptyd-kup-kafelki {
		grid-template-columns: 1fr;
	}
}

/* Przelacznik jezyka w naglowku. Dwie litery, bo w tym miejscu paska
   jest juz przycisk i wyszukiwarka, a flagi nie oznaczaja jezyka, tylko kraj. */
.peptyd-jezyki {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.peptyd-jezyki__biezacy {
	color: #0022a8;
}

.peptyd-jezyki__biezacy::after {
	content: "|";
	margin-left: 6px;
	color: #c9ced9;
	font-weight: 400;
}

.peptyd-jezyki__link {
	color: #6b7280;
	text-decoration: none;
}

.peptyd-jezyki__link:hover {
	color: #0022a8;
	text-decoration: underline;
}

.peptyd-naglowek__rozwijane .peptyd-jezyki {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.peptyd-naglowek__przycisk {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	background: #0022a8;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
}

.peptyd-naglowek__przycisk:hover {
	background: #001a80;
	color: #fff;
}

.peptyd-naglowek__koszyk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0022a8;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.peptyd-naglowek__koszyk-liczba {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 11px;
	background: #0022a8;
	color: #fff;
	font-size: 12px;
}

.peptyd-naglowek__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.peptyd-naglowek__burger span {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: #0022a8;
}

.peptyd-naglowek__rozwijane {
	padding: 12px 20px 20px;
	background: #a8cae4;
}

.peptyd-naglowek__rozwijane[hidden] {
	display: none;
}

.peptyd-menu-mobilne {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.peptyd-menu-mobilne a {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 34, 168, 0.15);
	color: #0022a8;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 1024px) {
	.peptyd-naglowek__pasek--duzy {
		display: none;
	}

	.peptyd-naglowek__pasek--maly {
		display: flex;
	}

	.peptyd-naglowek__logo img {
		max-width: 150px;
	}
}

/* ------------------------------- slider ------------------------------- */

.peptyd-slider {
	position: relative;
	overflow: hidden;
	height: 741px;
}

.peptyd-slider__slajd {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-size: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.peptyd-slider__slajd--aktywny {
	opacity: 1;
}

.peptyd-slider__tresc {
	max-width: 720px;
	padding: 0 24px;
	text-align: center;
}

.peptyd-slider__naglowek {
	margin: 0 0 14px;
	color: #0022a8;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.15;
}

.peptyd-slider__opis {
	margin: 0 0 26px;
	color: #071a68;
	font-size: 20px;
	line-height: 1.45;
}

.peptyd-slider__przycisk {
	display: inline-block;
	padding: 13px 34px;
	border-radius: 4px;
	background: #0172be;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.peptyd-slider__kropki {
	position: absolute;
	bottom: 22px;
	left: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.peptyd-slider__kropka {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid #0022a8;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.peptyd-slider__kropka--aktywna {
	background: #0022a8;
}

@media (max-width: 1024px) {
	.peptyd-slider {
		height: 420px;
	}

	.peptyd-slider__naglowek {
		font-size: 32px;
	}

	.peptyd-slider__opis {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.peptyd-slider {
		height: 340px;
	}

	.peptyd-slider__naglowek {
		font-size: 25px;
	}
}

/* ------------------------------- stopka ------------------------------- */

.peptyd-stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 60px;
	padding: 28px 24px;
	background: #a8cae4;
}

.peptyd-stopka__kolumna {
	flex: 1 1 220px;
	text-align: center;
}

.peptyd-stopka__kolumna--logo {
	line-height: 0;
}

.peptyd-stopka__kolumna--logo img {
	display: inline-block;
	width: auto;
	max-width: 200px;
	height: auto;
}

.peptyd-stopka p {
	margin: 0;
	color: #0022a8;
	font-size: 14px;
}

.peptyd-stopka a {
	color: #0022a8;
}

/* =========================================================================
   Kafelki kategorii w archiwach WooCommerce: strona /sklep/ oraz strony
   kategorii produktu. Domyslny kafelek WooCommerce jest ogromny - obrazek
   300 na 300 w siatce czterokolumnowej. Sprowadzamy go do tego samego
   wygladu, ktory ma sekcja kategorii na stronie glownej: kolo w niebieskiej
   obwodce, nazwa pod spodem, liczba produktow mniejsza i szara.

   Selektory sa celowo dluzsze niz trzeba. Regula WooCommerce ma postac
   ".woocommerce ul.products li.product" i wygrywa z krotszym zapisem,
   wiec dokladamy druga klase kafelka, zeby o kolejnosc arkuszy nie walczyc.
   ========================================================================= */

.woocommerce ul.products:has(> li.product-category) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 18px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
	list-style: none;
}

.woocommerce ul.products li.product.product-category {
	flex: 0 1 190px;
	float: none;
	clear: none;
	width: auto;
	max-width: 190px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.woocommerce ul.products li.product.product-category::before,
.woocommerce ul.products li.product.product-category::after {
	content: none;
}

.woocommerce ul.products li.product.product-category > a {
	display: block;
	padding: 8px 6px 14px;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product.product-category img {
	display: block;
	box-sizing: border-box;
	width: 128px;
	height: 128px;
	margin: 0 auto 12px;
	padding: 5px;
	border: 2px solid #0022a8;
	border-radius: 50%;
	background: #fff;
	object-fit: cover;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product.product-category > a:hover img {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 34, 168, 0.18);
}

.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
	display: block;
	margin: 0;
	padding: 0;
	color: #0022a8;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce ul.products li.product.product-category .count {
	display: block;
	margin-top: 4px;
	padding: 0;
	background: none;
	color: #767676;
	font-size: 12px;
	font-weight: 400;
}

@media (max-width: 1024px) {
	.woocommerce ul.products li.product.product-category {
		flex: 0 1 165px;
		max-width: 165px;
	}

	.woocommerce ul.products li.product.product-category img {
		width: 116px;
		height: 116px;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products:has(> li.product-category) {
		gap: 18px 12px;
	}

	.woocommerce ul.products li.product.product-category {
		flex: 0 1 calc(50% - 6px);
		max-width: calc(50% - 6px);
	}

	.woocommerce ul.products li.product.product-category img {
		width: 104px;
		height: 104px;
		margin-bottom: 10px;
	}

	.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
		font-size: 13px;
	}

	.woocommerce ul.products li.product.product-category .count {
		font-size: 11px;
	}
}

/* =========================================================================
   Opis kategorii produktu. Naglowki w opisie sa mniejsze od tytulu strony
   i tego samego koloru co reszta witryny, zeby opis czytalo sie jak tekst,
   a nie jak druga strona w stronie.
   ========================================================================= */

.term-description {
	max-width: 900px;
	margin: 0 auto 28px;
	text-align: left;
}

.term-description p {
	margin: 0 0 14px;
	line-height: 1.6;
}

.term-description h2 {
	margin: 26px 0 10px;
	color: #0022a8;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.term-description h2:first-child {
	margin-top: 0;
}

.term-description a {
	color: #0022a8;
}

@media (max-width: 767px) {
	.term-description h2 {
		font-size: 18px;
	}
}