/* ==========================================================================
   Sprawdzianowo — katalog (T2)
   Dopisuje wyłącznie to, czego nie ma w main.css: nagłówek archiwum,
   sidebar filtrów (z panelem mobilnym), pasek wyników, paginacja WooCommerce
   i pusty stan. Klasy z main.css (.sp-card, .sp-pill, .sp-tag, .sp-grid,
   .sp-product-card…) są tu tylko używane, nigdy nie redefiniowane.
   ========================================================================== */

/* ==========================================================================
   1. Nagłówek katalogu
   ========================================================================== */

.sp-catalog-hero{
	border-bottom:1px solid var(--line);
	background:var(--surface2);
}

.sp-catalog-hero__inner{padding-top:56px;padding-bottom:60px}

.sp-catalog-hero__badge{
	margin:0 0 20px;
	letter-spacing:.02em;
}

.sp-catalog-hero__title{margin:0 0 18px;max-width:820px}

.sp-catalog-hero__lead{max-width:680px;line-height:1.65}

/* Opis archiwum z haka woocommerce_archive_description (treść strony „Sklep",
   opis kategorii, wtyczki) — kolumna tekstu w stylu .sp-prose. */
.sp-catalog-hero__desc{max-width:760px;margin-top:20px;font-size:15px}
.sp-catalog-hero__desc > *:last-child{margin-bottom:0}
.sp-catalog-hero__desc .term-description > *:last-child{margin-bottom:0}

.sp-catalog-hero__trust{
	display:flex;flex-wrap:wrap;gap:28px;
	margin:32px 0 0;padding:0;list-style:none;
}

.sp-catalog-hero__trust-item{display:flex;align-items:center;gap:10px;list-style:none}

.sp-catalog-hero__check{
	width:26px;height:26px;flex:none;border-radius:8px;
	display:flex;align-items:center;justify-content:center;
	background:var(--accent-soft);color:var(--accent-hi);
}

.sp-catalog-hero__trust-label{font-size:13.5px;font-weight:600;color:var(--muted)}

/* ==========================================================================
   2. Układ: sidebar + siatka
   ========================================================================== */

.sp-catalog__layout{
	display:grid;grid-template-columns:300px minmax(0,1fr);
	gap:28px;align-items:start;
	padding:36px 0 8px;
}

/* Offset sticky liczony z realnej wysokości nagłówka (`--sp-header-h` ustawia
   main.js), a nie ze sztywnej wartości — pasek przedmiotów bywa ukryty. */
.sp-catalog__aside{
	position:sticky;top:calc(var(--sp-header-h,128px) + 14px);align-self:start;z-index:20;
	min-width:0;
}

.sp-catalog__main{min-width:0}

.sp-catalog__main .woocommerce-notices-wrapper:not(:empty){margin-bottom:18px}

/* ==========================================================================
   3. Sidebar filtrów
   ========================================================================== */

/* Pozycjonowanie sidebara ustawia .sp-catalog__aside (sticky → relative w RWD). */

/* Przycisk „Filtry" — tylko mobile (patrz sekcja RWD). */
.sp-filters__toggle{
	display:none;align-items:center;gap:10px;
	width:100%;height:46px;padding:0 14px;
	border:1px solid var(--line);border-radius:12px;background:var(--surface);
	color:var(--text);font-family:var(--sp-font-head);font-weight:700;font-size:14.5px;
	cursor:pointer;
	transition:border-color .2s ease;
}
.sp-filters__toggle:hover{border-color:var(--accent-line)}
.sp-filters__toggle-label{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.sp-filters__toggle-label svg{flex:none;color:var(--muted)}
.sp-filters__toggle-count{
	flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;
}
.sp-filters__toggle-chev{flex:none;color:var(--dim);transition:transform .2s ease}
.sp-filters.is-open .sp-filters__toggle-chev{transform:rotate(180deg)}
.sp-filters.is-open .sp-filters__toggle{border-color:var(--accent-line)}

.sp-filters__panel{
	overflow:hidden;
	max-height:calc(100vh - 178px);
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:thin;
}

/* --- Nagłówek karty --- */
.sp-filters__head{
	display:flex;align-items:center;gap:9px;
	padding:18px 20px;border-bottom:1px solid var(--line);
	color:var(--muted);
}
.sp-filters__head svg{flex:none}
.sp-filters__head-title{
	flex:1;
	font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);
}
.sp-filters__close{
	display:none;flex:none;
	width:30px;height:30px;border-radius:9px;
	align-items:center;justify-content:center;
	background:var(--surface2);color:var(--muted);border:none;cursor:pointer;
	transition:color .2s ease,background .2s ease;
}
.sp-filters__close:hover{background:var(--raise);color:var(--text)}

/* --- Pasek aktywnych filtrów --- */
.sp-filters__active{padding:14px 20px;border-bottom:1px solid var(--line)}
.sp-filters__active-head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sp-filters__active-label{font-size:13px;color:var(--dim);line-height:1.4}
.sp-filters__clear{
	flex:none;
	color:var(--accent-hi);font-size:13px;font-weight:700;text-decoration:none;
	transition:color .2s ease;
}
.sp-filters__clear:hover{color:var(--accent);text-decoration:none}
.sp-filters__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.sp-filters__chip{
	height:30px;padding:0 10px;gap:6px;
	font-size:12px;color:var(--muted);
}
.sp-filters__chip svg{color:var(--dim);transition:color .2s ease}
.sp-filters__chip:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-filters__chip:hover svg{color:var(--accent-hi)}

/* --- Grupy filtrów (akordeon) --- */
.sp-filters__group{border-bottom:1px solid var(--line)}
.sp-filters__group:last-child{border-bottom:none}

.sp-filters__group-head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	width:100%;padding:18px 20px 14px;
	background:none;border:none;cursor:pointer;text-align:left;
}
.sp-filters__group-title{
	font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);
	transition:color .2s ease;
}
.sp-filters__group-head:hover .sp-filters__group-title{color:var(--text)}
.sp-filters__chev{flex:none;color:var(--dim);transition:transform .22s var(--sp-ease)}
.sp-filters__group:not(.is-open) .sp-filters__chev{transform:rotate(-90deg)}

.sp-filters__group-panel{
	overflow:hidden;
	transition:max-height .28s var(--sp-ease);
}

.sp-filters__list{padding:0 20px 18px}
.sp-filters__list--row{display:flex;flex-wrap:wrap;gap:8px}
.sp-filters__list--grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sp-filters__list--grid .sp-pill{justify-content:center;gap:0;padding:7px 0}

/* ==========================================================================
   4. Pasek wyników i sortowanie
   ========================================================================== */

.sp-catalog__bar{
	display:flex;align-items:center;justify-content:space-between;
	gap:18px;flex-wrap:wrap;margin-bottom:18px;
}

.sp-catalog__count{margin:0;font-size:13.5px;color:var(--muted)}
.sp-catalog__count strong{
	color:var(--text);font-family:var(--sp-font-head);font-weight:800;
}
.sp-catalog__count-sep{color:var(--line2);margin:0 3px}

.sp-catalog__sort{display:flex;align-items:center;gap:10px}
.sp-catalog__sort-label{flex:none;font-size:13px;color:var(--dim)}

/* Natywny formularz sortowania WooCommerce (float:right z woocommerce.css). */
.sp-catalog__bar .sp-catalog__sort form.woocommerce-ordering{
	margin:0;padding:0;float:none;display:block;
}

.sp-catalog__sort select.orderby{
	width:auto;min-width:190px;height:40px;
	padding:0 36px 0 12px;
	border:1px solid var(--line);border-radius:10px;
	background-color:var(--surface);
	color:var(--text);font-family:var(--sp-font-body);font-size:13px;font-weight:600;
	cursor:pointer;outline:none;vertical-align:top;
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236E7683' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
	transition:border-color .2s ease;
}
.sp-catalog__sort select.orderby:hover{border-color:var(--line2)}
.sp-catalog__sort select.orderby:focus{border-color:var(--accent)}
.sp-catalog__sort select.orderby option{background:var(--surface);color:var(--text)}

/* ==========================================================================
   5. Siatka produktów
   ========================================================================== */

.sp-catalog__grid{gap:18px;align-items:stretch}

/* Slot na treść z haków pętli WooCommerce (quick-view, lista życzeń itp.).
   Nad przezroczystym linkiem tytułu, żeby przyciski wtyczek dało się kliknąć. */
.sp-product-card__hook{position:relative;z-index:2}

/* Stany przycisku koszyka (`.loading`, `.added`) i link „Zobacz koszyk"
   (`.added_to_cart`) są w main.css — karta produktu jest współdzielona ze
   stroną główną i kartą produktu, gdzie ten arkusz się nie ładuje. */

/* ==========================================================================
   6. Paginacja WooCommerce w stylu .sp-pagination
   Wyższa specyficzność niż reguły z woocommerce.css (ładowany po motywie).
   ========================================================================== */

.sp-catalog__after > *{margin-top:36px}

.sp-catalog__after nav.woocommerce-pagination{
	display:flex;justify-content:center;text-align:center;
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers{
	display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
	margin:0;padding:0;border:none;list-style:none;white-space:normal;
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers li{
	display:block;float:none;margin:0;padding:0;border:none;overflow:visible;
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers li .page-numbers{
	display:flex;align-items:center;justify-content:center;
	min-width:40px;height:40px;padding:0 12px;
	border:1px solid var(--line);border-radius:11px;background:var(--surface);
	color:var(--text);font-size:13.5px;font-weight:700;line-height:1;text-decoration:none;
	transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover{
	border-color:var(--accent-line);background:var(--surface2);color:var(--text);
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers li span.current{
	background:var(--accent);border-color:transparent;color:#fff;
}
.sp-catalog__after nav.woocommerce-pagination ul.page-numbers li span.dots{
	background:none;border-color:transparent;color:var(--dim);
}

/* ==========================================================================
   7. Pusty stan
   ========================================================================== */

.sp-catalog__empty{
	display:flex;flex-direction:column;align-items:center;
	gap:12px;padding:56px 32px;text-align:center;
}
.sp-catalog__empty-icon{
	width:52px;height:52px;border-radius:15px;margin-bottom:6px;
	display:flex;align-items:center;justify-content:center;
	background:var(--accent-soft);color:var(--accent-hi);
}
.sp-catalog__empty-title{margin:0}
.sp-catalog__empty-lead{max-width:540px}
.sp-catalog__empty-actions{
	display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;
}

/* ==========================================================================
   8. Responsywność — 1180px / 900px / 640px
   ========================================================================== */

@media (max-width:1180px){
	.sp-catalog-hero__inner{padding-top:44px;padding-bottom:46px}
	.sp-catalog-hero__trust{gap:18px 24px;margin-top:26px}

	.sp-catalog__layout{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:26px}

	/* Sidebar → przycisk „Filtry" + panel rozwijany ([data-sp-dropdown]). */
	.sp-catalog__aside{position:relative;top:auto;z-index:30}

	.sp-filters__toggle{display:flex;width:min(420px,100%)}

	.sp-filters__panel{
		display:none;
		position:absolute;top:calc(100% + 10px);left:0;z-index:60;
		width:min(420px,100%);
		max-height:min(70vh,560px);
		box-shadow:var(--sp-shadow-menu);
		animation:fadeUp .16s ease both;
	}
	.sp-filters.is-open .sp-filters__panel{display:block}

	.sp-filters__close{display:flex}
}

@media (max-width:900px){
	.sp-catalog-hero__inner{padding-top:34px;padding-bottom:36px}
	.sp-catalog-hero__trust{gap:12px 20px;margin-top:22px}
	.sp-catalog-hero__trust-label{font-size:13px}

	.sp-catalog__layout{padding-top:20px}

	.sp-filters__panel{width:100%}

	.sp-catalog__bar{gap:12px;margin-bottom:16px}

	.sp-catalog__after > *{margin-top:28px}
}

@media (max-width:640px){
	.sp-catalog-hero__inner{padding-top:28px;padding-bottom:30px}
	.sp-catalog-hero__badge{margin-bottom:16px;font-size:12px}
	.sp-catalog-hero__title{margin-bottom:14px}
	.sp-catalog-hero__trust{gap:10px 16px;margin-top:18px}
	.sp-catalog-hero__check{width:24px;height:24px;border-radius:7px}

	.sp-catalog__bar{flex-direction:column;align-items:flex-start;gap:10px}
	.sp-catalog__sort{width:100%}
	.sp-catalog__bar .sp-catalog__sort form.woocommerce-ordering{flex:1;min-width:0}
	.sp-catalog__sort select.orderby{width:100%;min-width:0}

	.sp-filters__head,
	.sp-filters__active{padding-left:16px;padding-right:16px}
	.sp-filters__group-head{padding:16px 16px 12px}
	.sp-filters__list{padding:0 16px 16px}

	.sp-catalog__empty{padding:40px 20px}
	.sp-catalog__empty-actions .sp-btn{width:100%}
}