/**
 * Sklep — kolumna filtrów i paginacja.
 * Ładowane tylko na archiwum produktów (patrz child_enqueue_styles w functions.php).
 */

/* ---------------------------------------------------------------------------
 * 1. Kolumna filtrów: natywny position:sticky zamiast sticky Elementora.
 *
 * Sticky Elementora przelicza dolną granicę wyłącznie w handlerach scroll i resize.
 * Rozwinięcie akordeonu filtrów zmienia wysokość kolumny i nie wywołuje żadnego
 * z tych zdarzeń, więc kolumna zostawała w position:fixed z granicą policzoną dla
 * wersji zwiniętej i wchodziła na stopkę (zmierzone: 932 px). Wymuszanie resize
 * z JS naprawiało pozycję, ale budziło wszystkie widgety Elementora w połowie
 * animacji akordeonu i rozwijanie się szarpało.
 *
 * Natywny sticky nie wymaga przeliczania — granicę pilnuje przeglądarka co klatkę.
 * Ustawienia sticky w samym widgecie są zdjęte, a kontener dostał identyfikator `tc-sticky`
 * (skrypt wordpress/sklep_sticky_natywny.php w repo projektu).
 *
 * Próg 768 px i offset 140 px odtwarzają poprzednie ustawienia widgetu
 * (sticky_on = desktop/laptop/tablet, sticky_offset = 140).
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {

	/* overflow:hidden robi z elementu kontener przewijania i każdy position:sticky
	   w środku przestaje działać. clip przycina tak samo, ale kontenera nie tworzy.
	   Selektor łączy id z klasą, bo arkusz inline motywu ustawia `div#content{overflow:hidden}`
	   — selektor z ID bije samą klasę, a ląduje w dokumencie PO tym pliku.
	   `#content.site-content` (id + klasa) wygrywa specyficznością bez uciekania się
	   do !important. */
	#content.site-content {
		overflow: clip;
	}

	/* Uchwytem jest id, a nie klasa: kontenery Elementora renderują `_element_id`,
	   ale nie `_css_classes` (widgety renderują oba).
	   align-self, bo rodzic jest flexem — bez tego element rozciągnąłby się
	   na całą wysokość kolumny i nie miałby po czym jechać. */
	#tc-sticky {
		position: sticky;
		top: 140px;
		align-self: flex-start;
	}

	/* Klasę zdejmuje/nakłada sklep.js. Kolumna filtrów bywa najwyższym elementem wiersza
	   (wyfiltrowane widoki z kilkoma produktami) — wtedy sticky nie ma zapasu, po którym
	   mógłby jechać, i przeglądarka odkleja pudełko z powrotem na pozycję statyczną,
	   co wygląda jak skok w górę. W takim układzie przyklejanie i tak niczego nie wnosi,
	   bo nie ma czego przewijać: pudełko stoi, a rozwinięcie kategorii rozsuwa stronę. */
	#tc-sticky.tc-bez-sticky {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Paginacja JetSmartFilters.
 *
 * Paginacja Loop Grida Elementora nie przelicza się razem z filtrami: po zawężeniu
 * wyników zostawała ta z wejścia na stronę, a jej linki gubiły parametry filtra,
 * więc druga strona oddawała cały katalog. Zastąpił ją widget paginacji JSF wpięty
 * w ten sam provider — ma jednak własny, surowy markup, więc wygląd poprzedniej
 * paginacji trzeba odtworzyć tutaj.
 *
 * Pomarańcz #ff4f18 jest z palety strony (przyciski ilości, ikona „Wyczyść filtry").
 * ------------------------------------------------------------------------- */
.jet-filters-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.jet-filters-pagination .jet-filters-pagination__item {
	cursor: pointer;
	text-decoration: none;
}

.jet-filters-pagination .jet-filters-pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #334155;
	transition: background-color .15s ease, box-shadow .15s ease;
}

/* Aktywna strona: biała plakietka z miękkim cieniem, jak w poprzedniej paginacji. */
.jet-filters-pagination .jet-filters-pagination__current .jet-filters-pagination__link {
	background: #fff;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
	color: #12395c;
	font-weight: 600;
}

.jet-filters-pagination .jet-filters-pagination__item:not(.jet-filters-pagination__current):not(.prev-next):hover .jet-filters-pagination__link {
	background: rgba(255, 255, 255, .7);
}

/* Strzałki. Etykiety „Prev" i „Next" zostają w HTML-u dla czytników ekranu —
   dlatego font-size:0 na linku, a chevron rysuje ::before. */
.jet-filters-pagination .prev-next .jet-filters-pagination__link {
	min-width: 32px;
	padding: 0;
	font-size: 0;
	color: #ff4f18;
}

.jet-filters-pagination .prev-next .jet-filters-pagination__link::before {
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
}

.jet-filters-pagination .prev .jet-filters-pagination__link::before { content: "\2039"; }
.jet-filters-pagination .next .jet-filters-pagination__link::before { content: "\203A"; }

.jet-filters-pagination .prev-next:hover .jet-filters-pagination__link {
	background: transparent;
	opacity: .65;
}

/* Strzałka na pierwszej i ostatniej stronie nie ma udawać klikalnej. */
.jet-filters-pagination .prev-next.disabled .jet-filters-pagination__link {
	opacity: .3;
	cursor: default;
}