/**
 * Catalog filters — responsive component.
 *
 * The same three panels (categories, sort, filters) are a sidebar on desktop
 * and slide-up sheets on mobile, opened from a fixed bottom bar. One DOM, one
 * WooCommerce widget instance — no duplication, so the price slider keeps
 * working. Uses the shared tokens from shv-base.css.
 *
 * Breakpoint: 992px (Bootstrap lg) — where the sidebar column stops sitting
 * beside the grid.
 */

/* ============================================================
   ARCHIVE SPACING — tame the theme's py-10 (100px top/bottom)
   ============================================================
   The archive section used the .py-10 utility (100px !important top/bottom),
   leaving a large empty band above the title. The class is dropped in the
   template; padding now lives here at a sane size for both breakpoints. */
.product-list {
	padding-top: 40px;
	padding-bottom: 48px;
}

/* Product-card rating badge — centre it under the title. */
.shv-card-rating {
	display: flex;
	justify-content: center;
}

/* ============================================================
   PANELS — shared
   ============================================================ */
.shv-fpanel {
	background: #fff;
	border: 1px solid var(--shv-line);
	border-radius: 14px;
	margin-bottom: 20px;
	overflow: hidden;
}

.shv-fpanel-title {
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: var(--shv-ink);
	background: #fafaf8;
	border-bottom: 1px solid var(--shv-line);
	margin: 0;
	padding: 13px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.shv-fpanel-body {
	padding: 16px;
}

/* The sheet close button only exists on mobile. */
.shv-fpanel-close {
	display: none;
	background: none;
	border: none;
	color: var(--shv-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}

/* ---------- Categories inside a panel ---------- */
.shv-fpanel .categories-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shv-fpanel .categories-list > ul > li {
	border-bottom: 1px dashed var(--shv-line);
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.shv-fpanel .categories-list > ul > li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.shv-fpanel .category-with-count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.shv-fpanel .categories-list a {
	color: var(--shv-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.shv-fpanel .categories-list a:hover {
	color: var(--shv-coral-dark);
}

.shv-fpanel .categories-list .sub-cat-list {
	margin: 8px 0 0 18px;
}

.shv-fpanel .categories-list .sub-cat-list a {
	font-weight: 500;
	font-size: 14px;
	color: #55555c;
}

.shv-fpanel .category-count {
	flex: none;
	min-width: 24px;
	text-align: center;
	background: var(--shv-stone);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: var(--shv-muted);
	padding: 1px 8px;
}

/* ============================================================
   ACTIVE FILTER CHIPS
   ============================================================ */
.shv-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.shv-active-filters-label {
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--shv-muted);
}

.shv-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--shv-coral-tint);
	color: var(--shv-coral-dark);
	border: 1px solid transparent;
	border-radius: 100px;
	padding: 6px 12px;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.shv-chip:hover {
	border-color: var(--shv-coral);
	color: var(--shv-coral-dark);
	text-decoration: none;
}

.shv-chip-x {
	font-size: 16px;
	line-height: 1;
}

.shv-chip-clear {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--shv-muted);
	text-decoration: underline;
}

/* ============================================================
   SORT PANEL — horizontal bar on desktop, sheet on mobile
   ============================================================
   Same DOM node as the mobile "Sortuj" sheet. On desktop its sheet header is
   hidden and the body lays out as a slim bar above the grid. */
@media (min-width: 992px) {
	.shv-sortpanel {
		border: none;
		border-radius: 0;
		overflow: visible;
	}

	/* The sheet header is only for the mobile sort sheet. */
	.shv-sortpanel .shv-fpanel-title {
		display: none;
	}

	.shv-sortpanel .shv-fpanel-body {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		flex-wrap: wrap;
		background: #fafaf8;
		border: 1px solid var(--shv-line);
		border-radius: 12px;
		padding: 12px 16px;
	}
}

.shv-sortpanel .woocommerce-result-count {
	margin: 0;
	font-size: 14px;
	color: var(--shv-muted);
}

.shv-sortpanel .woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	border: 1px solid var(--shv-stone-line);
	border-radius: 9px;
	padding: 10px 14px;
	font-size: 15px;
	background: #fff;
	color: var(--shv-ink);
	max-width: 100%;
}

/* ============================================================
   SEARCH BAR (top of the grid column)
   ============================================================ */
.shv-catalog-search form {
	display: flex;
	border: 1px solid var(--shv-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.shv-catalog-search input[type="text"] {
	flex: 1;
	border: none;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--shv-ink);
	background: transparent;
}

.shv-catalog-search input[type="text"]:focus {
	outline: none;
}

.shv-catalog-search button {
	border: none;
	background: var(--shv-coral);
	color: #fff;
	padding: 0 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.shv-catalog-search button:hover {
	background: var(--shv-coral-dark);
}

/* ============================================================
   RECOMMENDED PRODUCTS (desktop sidebar extra)
   ============================================================ */
.recent-post-box {
	display: flex;
	align-items: center;
	gap: 12px;
}

.recent-post-box + .recent-post-box {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--shv-line);
}

.recent-post-image {
	flex: none;
	width: 56px;
}

.recent-post-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.recent-post-info h6 {
	margin: 0 0 3px;
	font-size: 13.5px;
	line-height: 1.3;
}

.recent-post-info h6 a {
	color: var(--shv-ink);
	text-decoration: none;
}

.recent-post-info h6 a:hover {
	color: var(--shv-coral-dark);
}

.recent-post-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--shv-leaf-dark);
}

.shv-fpanel-empty {
	margin: 0;
	color: var(--shv-muted);
	font-size: 14px;
}

/* ============================================================
   WOOCOMMERCE FILTER WIDGETS inside the Filtry panel
   ============================================================
   The site disables WooCommerce's own CSS (functions.php), so the price slider
   and layered-nav widgets would render unstyled. These are the minimum styles
   to make them usable in the panel/sheet. Scoped to the panel so nothing else
   is affected. */
.shv-fpanel .widget {
	margin: 0 0 22px;
}

.shv-fpanel .widget:last-child {
	margin-bottom: 0;
}

.shv-fpanel .widget > .widget-title,
.shv-fpanel .widget > h2,
.shv-fpanel .widget > h3 {
	font-family: "Manrope", "Inter", sans-serif;
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--shv-muted);
	margin: 0 0 14px;
}

/* --- Price slider (jQuery UI) --- */
.shv-fpanel .price_slider_wrapper {
	padding-top: 4px;
}

.shv-fpanel .ui-slider {
	position: relative;
	height: 4px;
	background: var(--shv-stone-line);
	border-radius: 100px;
	margin: 10px 8px 18px;
}

.shv-fpanel .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--shv-coral);
	border-radius: 100px;
}

.shv-fpanel .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	margin-left: -9px;
	background: #fff;
	border: 2px solid var(--shv-coral);
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	touch-action: none;
}

.shv-fpanel .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--shv-ink);
}

.shv-fpanel .price_slider_amount .price_label {
	flex: 1;
	color: var(--shv-muted);
}

.shv-fpanel .price_slider_amount .button {
	order: 2;
	background: var(--shv-ink);
	color: #fff;
	border: none;
	border-radius: 9px;
	padding: 9px 18px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.shv-fpanel .price_slider_amount .button:hover {
	background: var(--shv-coral);
}

/* --- Layered nav / attribute filters --- */
.shv-fpanel .woocommerce-widget-layered-nav-list,
.shv-fpanel .widget_layered_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shv-fpanel .woocommerce-widget-layered-nav-list__item,
.shv-fpanel .widget_layered_nav li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--shv-line);
}

.shv-fpanel .woocommerce-widget-layered-nav-list__item:last-child,
.shv-fpanel .widget_layered_nav li:last-child {
	border-bottom: none;
}

.shv-fpanel .woocommerce-widget-layered-nav-list a,
.shv-fpanel .widget_layered_nav li a {
	color: var(--shv-ink);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.shv-fpanel .woocommerce-widget-layered-nav-list a:hover,
.shv-fpanel .widget_layered_nav li a:hover {
	color: var(--shv-coral-dark);
}

.shv-fpanel .woocommerce-widget-layered-nav-list__item.chosen a,
.shv-fpanel .widget_layered_nav li.chosen a {
	color: var(--shv-coral-dark);
}

.shv-fpanel .woocommerce-widget-layered-nav-list .count,
.shv-fpanel .widget_layered_nav li .count {
	color: var(--shv-muted);
	font-size: 13px;
	font-weight: 400;
}

/* ============================================================
   WOOCOMMERCE PRODUCT FILTERS BLOCK — force inline in our sheet
   ============================================================
   shop-sidebar holds WooCommerce's Product Filters block, which has its own
   mobile "overlay" mode: a "Filtrowanie produktów" button that opens a nested
   dialog with an Apply button. Inside our Filtry sheet that means the filters
   are 2–3 taps away and the dialog collides with the sheet. Force the block to
   render inline (its own >600px desktop layout) wherever it sits in our panel,
   so the filters show immediately. WooCommerce scopes its rules with :where()
   (0 specificity), so ours win; !important guards the toggles the block's JS
   might otherwise re-show. */
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__open-overlay,
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay-header,
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay-footer {
	display: none !important;
}

.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay,
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay-wrapper,
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay-dialog,
.shv-fpanel[data-panel="filters"] .wc-block-product-filters__overlay-content {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	height: auto !important;
	width: auto !important;
	max-height: none !important;
	overflow: visible !important;
	background: inherit !important;
	pointer-events: auto !important;
}

/* ============================================================
   MOBILE SORT LIST (one-tap options, replaces the <select> on mobile)
   ============================================================ */
.shv-sort-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Desktop uses the native <select> in the bar; the list is mobile-only. */
	display: none;
}

.shv-sort-list li + li {
	border-top: 1px solid var(--shv-line);
}

.shv-sort-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--shv-ink);
	text-decoration: none;
}

.shv-sort-option.is-current {
	color: var(--shv-coral-dark);
}

.shv-sort-check {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--shv-coral);
}

/* ============================================================
   MOBILE FILTER BAR + SHEETS  (≤ 991px)
   ============================================================ */
.shv-filterbar {
	display: none;
}

.shv-filter-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 24, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 1400;
}

body.shv-sheet-open .shv-filter-backdrop {
	opacity: 1;
	visibility: visible;
}

/* Lock the page behind an open sheet so a scroll gesture moves the sheet's own
   content, not the catalog underneath. */
body.shv-sheet-open {
	overflow: hidden;
}

@media (max-width: 991px) {
	/* Fixed bottom bar. Auto-flow columns so it stays evenly divided whether it
	   has three buttons or two (Sortuj is dropped on an empty result set). */
	.shv-filterbar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1px solid var(--shv-line);
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
		z-index: 1401;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.shv-filterbar-btn {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		background: none;
		border: none;
		padding: 10px 6px;
		font-family: "Manrope", "Inter", sans-serif;
		font-weight: 700;
		font-size: 12.5px;
		color: var(--shv-ink);
		cursor: pointer;
	}

	.shv-filterbar-btn + .shv-filterbar-btn {
		border-left: 1px solid var(--shv-line);
	}

	.shv-filterbar-btn svg {
		width: 20px;
		height: 20px;
	}

	.shv-filterbar-btn:active {
		background: var(--shv-stone);
	}

	.shv-filterbar-badge {
		position: absolute;
		top: 4px;
		right: 50%;
		margin-right: -26px;
		min-width: 18px;
		height: 18px;
		border-radius: 100px;
		background: var(--shv-coral);
		color: #fff;
		font-size: 11px;
		font-weight: 800;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 5px;
	}

	/* Tighter top on mobile; keep bottom clear of the fixed bar. */
	.product-list {
		padding-top: 20px;
		padding-bottom: 84px;
	}

	/* Each panel becomes a slide-up sheet. */
	.shv-fpanel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		max-height: 82vh;
		display: flex;
		flex-direction: column;
		border: none;
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 1402;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
	}

	.shv-fpanel.is-open {
		transform: translateY(0);
	}

	.shv-fpanel-title {
		font-size: 18px;
		padding: 16px 18px;
		flex: none;
	}

	.shv-fpanel-close {
		display: block;
	}

	.shv-fpanel-body {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 18px;
	}

	/* Recommended products are desktop-only — they aren't part of the bottom
	   bar, so they'd have no way to open on mobile. */
	.shv-aside-extra {
		display: none;
	}

	/* In the Sortuj sheet, swap the native <select> for the one-tap list. */
	.shv-sortpanel .woocommerce-ordering {
		display: none;
	}

	.shv-sort-list {
		display: block;
	}

	/* The sidebar column now holds only fixed sheets (out of flow) plus the
	   hidden extra, so collapse it to nothing. It can't be display:none — that
	   would remove the fixed sheets with it — so zero its box instead and drop
	   the row gutter that would otherwise leave a gap above the grid. */
	.shv-aside-col {
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Cookie "reopen" pill sits BELOW the filter UI — the bar, sheets and backdrop
	   (z-index 1400–1402) all render on top of it. The first-visit consent modal
	   keeps its own high z-index and still covers everything. Only catalog pages
	   load this file, so the pill's z-index is unchanged elsewhere. !important
	   beats cookie-consent.css, which is enqueued after this file. */
	.shv-cc-reopen {
		z-index: 1399 !important;
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.shv-fpanel,
	.shv-filter-backdrop {
		transition: none;
	}
}