/**
 * Hockey Store — katalog (siatka sklepu i panel filtrow).
 * =======================================================
 * Laduje sie po marketplace.css.
 *
 * PODZIAL ODPOWIEDZIALNOSCI — przeczytaj przed edycja
 * ---------------------------------------------------
 * Kontrolki wewnatrz filtrow (checkboxy, etykiety, liczniki, suwak ceny,
 * pola kwot) sa stylizowane w marketplace.css, sekcja filtrow. Tamten
 * arkusz przebudowuje natywne kontrolki WooCommerce i dziala poprawnie
 * — nie przenosimy go tutaj, bo to 40KB wspoldzielone z reszta serwisu.
 *
 * Ten plik odpowiada za POWLOKE panelu: pozycjonowanie kolumny,
 * przewijanie, zwijane grupy i hierarchie naglowkow.
 *
 * WERYFIKACJA WIZUALNA 09.08.2026 — co naprawiono
 * ------------------------------------------------
 * Pomiary na /sklep/ (viewport 2010px, 13 produktow w katalogu):
 *   - kolumna filtrow 2337px wobec 2120px calej siatki produktow
 *   - 34 pozycje filtrow na 13 produktow
 *   - position: sticky przy wysokosci 2337px NIE DZIALALO: element wyzszy
 *     od okna nigdy sie nie przykleja. Ten sam blad opisano juz raz
 *     w product.css (punkt 12) przy boxie zakupowym — tu go powtorzono.
 *   - w pasmie 601-782px overlay WooCommerce jest juz wylaczony
 *     (jego media query to max-width: 600px), a kolumna filtrow byla
 *     rozciagnieta na pelna szerokosc NAD siatka: ponad dwa ekrany
 *     przewijania do pierwszego produktu
 *   - osiem identycznych naglowkow 13px/700, tyle samo co etykiety pod
 *     nimi — hierarchia plaska
 *
 * Zwijanie grup realizuje novamira-sandbox/h4f-shop-filters.php.
 */

.hs-shop-grid {
	gap: var(--hs-space-lg);
	align-items: flex-start;
}

.hs-filters {
	padding: var(--hs-space-md);
	background: var(--hs-white);
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-panel);
}

.hs-filters h2 {
	margin-top: 0;
	font-size: var(--hs-fs-h3);
	line-height: var(--hs-lh-h3);
}

.hs-catalog-tools {
	margin-bottom: var(--hs-space-lg);
}

/* WooCommerce Blocks: pionowe wyrownanie etykiety i pola sortowania. */
.hs-catalog-tools .woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: var(--hs-space-sm);
	margin: 0;
}

.hs-catalog-tools .woocommerce-ordering label {
	margin: 0;
	line-height: 1.4;
}

/* FiboSearch w katalogu ma wypelnic swoj kontener, nie wlasna maksymalna
   szerokosc z arkusza wtyczki. */
.dgwt-wcas-search-wrapp {
	max-width: none !important;
	margin: 0 !important;
}

/* ============================================================
   PANEL FILTROW — ZWIJANE GRUPY
   Naglowek h3 wedruje do <summary> (patrz h4f-shop-filters.php),
   wiec konspekt naglowkow strony zostaje nienaruszony, a zwijanie
   dziala natywnie, bez JavaScriptu.
   ============================================================ */
.hs-filter-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: var(--hs-tap);
	cursor: pointer;
	list-style: none;
}

.hs-filter-summary::-webkit-details-marker {
	display: none;
}

/* Naglowek grupy: 15px zamiast 13px. Wczesniej naglowek i etykieta pod
   nim mialy ten sam rozmiar i rozniły sie wylacznie waga, wiec osiem
   grup czytalo sie jako jedna dluga lista. Drabinka to teraz
   h2 20px -> h3 15px -> etykieta 14px. */
.hs-filter-summary h3 {
	margin: 0;
	font-size: 0.9375rem !important;
	line-height: 1.3;
}

/* !important powyzej: naglowki grup maja z szablonu klase
   has-small-font-size, a WordPress wypisuje presety rozmiaru z theme.json
   jako .has-small-font-size { font-size: ... !important }. Bez tego preset
   wygrywa z KAZDA regula motywu — dlatego naglowki mialy 13px mimo
   deklaracji var(--hs-fs-sm) w marketplace.css. */

/* Strzalka zwijania — ten sam ksztalt co w .hs-specs (buybox.css),
   zeby oba zwijane elementy w serwisie wygladaly tak samo. */
.hs-filter-summary::after {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	margin-right: 3px;
	border-right: 2px solid var(--hs-navy-soft);
	border-bottom: 2px solid var(--hs-navy-soft);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.15s ease;
}

.hs-filter-group[open] > .hs-filter-summary::after {
	transform: rotate(-135deg);
}

.hs-filter-summary:hover::after {
	border-color: var(--hs-navy);
}

.hs-filter-summary:focus-visible {
	outline: var(--hs-focus-width) solid var(--hs-focus-color);
	outline-offset: var(--hs-focus-offset);
	border-radius: var(--hs-radius-sm);
}

.hs-filter-group__body {
	padding-top: 4px;
}

/* Kategoria ma 11 pozycji przy 13 produktach w katalogu — sama ta grupa
   mierzyla 545px. Wlasny scroll trzyma ja w ryzach niezaleznie od tego,
   ile kategorii przybedzie. Pozostale grupy maja po 3-6 pozycji i nie
   potrzebuja ograniczenia. */
/* Wlasny scroll grupy Kategoria USUNIETY 09.08.2026.
   Byl drugim paskiem przewijania wewnatrz trzeciego (panel -> grupa),
   a lista 11 pozycji miesci sie bez niego po zageszczeniu wierszy
   (sekcja GESTOSC LISTY nizej): 11 x 32px = 352px zamiast 484px. */

/* ============================================================
   GESTOSC LISTY — DESKTOP
   Etykiety filtrow dziedzicza min-height: var(--hs-tap) z marketplace.css.
   44px to poprawny cel dotykowy, ale przy myszy ten sam wiersz czyta sie
   jako rozstrzelona lista. Zwezamy wylacznie tam, gdzie urzadzenie ma
   precyzyjny wskaznik — na dotyku 44px zostaje nietkniete.
   ============================================================ */
@media (min-width: 783px) and (pointer: fine) {
	.hs-filters .wc-block-product-filter-checkbox-list__label {
		min-height: 32px;
	}

	/* REZERWACJA WYSOKOSCI LISTY.
	   --hs-filter-rows to liczba pozycji z pierwszego renderu
	   (h4f-shop-filters.php). Blok usuwa z listy pozycje, ktore po
	   zawezeniu daja zero wynikow — bez tej rezerwacji grupa kurczy sie
	   w trakcie klikania i wszystko pod nia skacze w gore. */
	.hs-filter-group__body {
		min-height: calc(var(--hs-filter-rows, 0) * 32px);
	}
}

@media (min-width: 783px) and (pointer: coarse) {
	.hs-filter-group__body {
		min-height: calc(var(--hs-filter-rows, 0) * var(--hs-tap));
	}
}

/* WYBRANE FILTRY NA KONCU PANELU.
   Blok chipow jest domyslnie ukryty i pojawia sie dopiero po pierwszym
   zaznaczeniu — zmierzone 74px, o ktore zjezdzaly WSZYSTKIE grupy pod nim.
   Na koncu panelu ta sama zmiana nie przesuwa juz niczego.
   Docelowo chipy powinny stanac nad siatka produktow (zmiana w szablonie),
   gdzie klient i tak szuka potwierdzenia, ze filtr zadzialal. */
@media (min-width: 783px) {
	.hs-filters .wc-block-product-filters__overlay-content {
		display: flex;
		flex-direction: column;
	}

	.hs-filters .wp-block-woocommerce-product-filter-active {
		order: 90;
	}
}

/* ============================================================
   SUWAK CENY — KCIUK W GRANICACH PANELU
   input[type="range"] jest pozycjonowany absolutnie na pelnej szerokosci
   toru (marketplace.css), wiec kciuk 22px wystawal polowa poza krawedz
   .hs-filters. Rodzic .wc-block-product-filters ma overflow-x: clip,
   wiec koncowka suwaka byla po prostu ucinana.
   Cofamy tor o promien kciuka. ::before i .range-bar sa pozycjonowane
   wzgledem tego samego elementu, wiec tor i wypelnienie zostaja spojne.
   ============================================================ */
.hs-filters .wc-block-product-filter-price-slider__range {
	width: auto !important;
	margin-inline: 11px;
}

/* ============================================================
   UKLAD KOLUMNY
   ============================================================ */
/* Prog 783px, a nie 1025px: to na 782px kolumny schodza na stos
   (patrz media query nizej oraz system.css § BREAKPOINTY). Powyzej tej
   wartosci panel stoi obok siatki i moze byc przyklejony. */
@media (min-width: 783px) {
	/* Sticky dziala tylko wtedy, gdy element MIESCI SIE w oknie.
	   Ograniczenie wysokosci i wlasny scroll to warunek konieczny —
	   bez nich deklaracja position: sticky nie robila nic przy panelu
	   o wysokosci 2337px. */
	/* PRZYKLEJENIE OD DOLU, BEZ WLASNEGO SCROLLA (zmiana 09.08.2026).
	   Poprzednia wersja przyklejala gore panelu (top: 92px) i zeby to
	   zadzialalo, ograniczala wysokosc do wysokosci okna z overflow-y: auto.
	   Skutek: staly pasek przewijania panelu, a wewnatrz drugi — w grupie
	   Kategoria. Dwa zagniezdzone scrolle na 13 produktow.

	   bottom zamiast top rozwiazuje to bez zadnego sufitu wysokosci:
	   panel przewija sie z trescia normalnie, a gdy jego dol dojdzie do
	   dolu okna — przykleja sie. Dzieki temu cala zawartosc jest zawsze
	   osiagalna, takze gdy klient rozwinie wszystkie grupy.
	   Pasek administratora nie wymaga korekty, bo nie kotwiczymy gory. */
	.hs-filters {
		/* align-self, NIE align-items na rodzicu. Core WordPressa wypisuje
		   .wp-block-columns { align-items: normal !important }, wiec
		   deklaracja align-items: flex-start w .hs-shop-grid przegrywa
		   i kolumna filtrow jest rozciagana do wysokosci kolumny
		   z produktami — zmierzone 2252px przy wlasnej tresci 1245px.
		   Element rozciagniety do wysokosci rodzica nie moze sie przykleic,
		   wiec bez tej linii position: sticky nizej nie robi nic. */
		align-self: flex-start;
		position: sticky;
		top: auto;
		bottom: 16px;
	}
}

@media (max-width: 782px) {
	/* Kolumny na stosie: panel siedzi NAD siatka produktow. Overlay
	   WooCommerce wlacza sie dopiero ponizej 601px, wiec w pasmie
	   601-782px to jedyne zabezpieczenie przed odepchnieciem produktow
	   poza ekran. Przy domyslnie zwinietych grupach panel i tak jest
	   krotszy — sufit dziala, gdy klient rozwinie wszystko. */
	.hs-filters {
		position: static;
		flex-basis: 100% !important;
		max-height: 60vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.hs-shop-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 600px) {
	/* Ponizej 600px filtry przejmuje szuflada WooCommerce (position:
	   fixed), wiec kolumna w tresci strony ma juz tylko przycisk
	   otwierajacy — zadnych ograniczen wysokosci. */
	.hs-filters {
		max-height: none;
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-filter-summary::after {
		transition: none;
	}
}


/* ============================================================
   MOJE KONTO: PANEL NAWIGACJI
   Wyglad odpowiada powloce panelu filtrow katalogu.
   ============================================================ */
body.woocommerce-account.logged-in .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
	gap: var(--hs-space-lg);
	align-items: start;
}

/* WooCommerce dodaje pseudoelementy clearfix. W siatce staja sie pustymi
   elementami i przesuwaja menu do drugiej kolumny, dlatego sa zbedne. */
body.woocommerce-account.logged-in .entry-content > .woocommerce::before,
body.woocommerce-account.logged-in .entry-content > .woocommerce::after {
	display: none;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	padding: var(--hs-space-md);
	position: sticky;
	top: var(--hs-space-md);
	background: var(--hs-white);
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-panel);
}

body.admin-bar.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
	top: 48px;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: var(--hs-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--hs-tap);
	padding: 8px 12px;
	border-left: 3px solid transparent;
	border-radius: var(--hs-radius-control);
	color: var(--hs-graphite);
	font-size: 1rem;
	font-weight: var(--hs-fw-body);
	line-height: 1.4;
	text-decoration: none;
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation a:hover {
	background: var(--hs-ice);
	color: var(--hs-navy);
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation .is-active > a {
	border-left-color: var(--hs-copper);
	background: var(--hs-copper-tint);
	color: var(--hs-navy);
	font-weight: var(--hs-fw-strong);
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--hs-space-xs);
	padding-top: var(--hs-space-sm);
	border-top: 1px solid var(--hs-border-soft);
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

body.woocommerce-account.logged-in .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.hs-account-menu-toggle {
	display: none;
}

@media (max-width: 782px) {
	body.woocommerce-account.logged-in .entry-content > .woocommerce {
		display: block;
	}

	.hs-account-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: var(--hs-tap);
		margin: 0 0 var(--hs-space-xs);
		padding: 10px var(--hs-space-md);
		border: 1px solid var(--hs-border);
		border-radius: var(--hs-radius-panel);
		background: var(--hs-white);
		color: var(--hs-navy);
		font: inherit;
		font-weight: var(--hs-fw-strong);
		text-align: left;
		cursor: pointer;
	}

	.hs-account-menu-toggle::after {
		content: "";
		width: 10px;
		height: 10px;
		margin-right: 3px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
	}

	.hs-account-menu-toggle[aria-expanded="true"]::after {
		transform: rotate(-135deg);
	}

	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
		display: none;
		position: static;
		margin-bottom: var(--hs-space-md);
	}

	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.is-open {
		display: block;
	}
}