/* ==========================================================================
   FitFlex Shop Filters — category sidebar
   ========================================================================== */

:root {
	--ffs-surface: #131d26;
	--ffs-text: #fff7ed;
	--ffs-heading: #ffffff;
	--ffs-muted: rgba(255, 247, 237, 0.6);
	--ffs-line: rgba(255, 247, 237, 0.16);
	--ffs-accent: #b95b26;
}

.ffs-shop-layout,
.ffs-shop-layout *,
.ffs-filter,
.ffs-shop-main {
	box-sizing: border-box;
}

.ffs-shop-layout {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	width: 100%;
	max-width: min(var(--wp--style--global--wide-size, 1100px), 100%) !important;
	margin-left: auto;
	margin-right: auto;
}

.ffs-shop-layout.alignwide {
	margin-left: auto !important;
	margin-right: auto !important;
}

.ffs-shop-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ffs-filter {
	flex: 0 0 250px;
	max-width: 250px;
	position: sticky;
	top: 2rem;
	padding: 1.4rem 1.4rem 1.6rem;
	background-color: var(--ffs-surface);
	border: 1px solid var(--ffs-line);
	border-radius: 18px;
}

body:not(.elementor-page) main .ffs-filter .ffs-filter__title {
	margin: 0 0 1.1rem;
	font-size: 0.82rem !important;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ffs-muted) !important;
}

.ffs-filter__list,
.ffs-filter__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ffs-filter__list > li + li {
	margin-top: 0.15rem;
}

.ffs-filter__group {
	margin-top: 1.1rem !important;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ffs-line);
}

.ffs-filter__sublist {
	margin: 0.3rem 0 0 0.2rem;
	padding-left: 0.85rem;
	border-left: 1px solid var(--ffs-line);
}

body:not(.elementor-page) main a.ffs-filter__link:not(.wp-element-button):not(.button):not(.wc-block-components-button) {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.34rem 0;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--ffs-text) !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

body:not(.elementor-page) main a.ffs-filter__link--parent:not(.wp-element-button):not(.button):not(.wc-block-components-button),
body:not(.elementor-page) main a.ffs-filter__link--all:not(.wp-element-button):not(.button):not(.wc-block-components-button) {
	font-weight: 700;
	color: var(--ffs-heading) !important;
}

body:not(.elementor-page) main a.ffs-filter__link:not(.wp-element-button):not(.button):not(.wc-block-components-button):hover,
body:not(.elementor-page) main a.ffs-filter__link:not(.wp-element-button):not(.button):not(.wc-block-components-button):focus-visible {
	color: var(--ffs-accent) !important;
}

body:not(.elementor-page) main a.ffs-filter__link.is-active:not(.wp-element-button):not(.button):not(.wc-block-components-button) {
	font-weight: 700;
	color: var(--ffs-accent) !important;
}

body:not(.elementor-page) main .ffs-filter span.ffs-filter__count {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--ffs-muted) !important;
}

body:not(.elementor-page) main .ffs-filter span.ffs-filter__label {
	color: inherit !important;
}

.ffs-shop-main .wc-block-product-template {
	width: 100%;
}

@media (max-width: 900px) {
	.ffs-shop-layout {
		flex-direction: column;
		gap: 1.75rem;
	}

	.ffs-filter {
		position: static;
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}

	.ffs-filter__sublist {
		display: flex;
		flex-wrap: wrap;
		gap: 0.15rem 0.5rem;
		border-left: 0;
		padding-left: 0;
		margin: 0.5rem 0 0;
	}

	.ffs-filter__sublist > li {
		flex: 0 0 auto;
		max-width: 100%;
	}

	body:not(.elementor-page) main .ffs-filter__sublist a.ffs-filter__link:not(.wp-element-button):not(.button):not(.wc-block-components-button) {
		width: auto;
		justify-content: flex-start;
		gap: 0.3rem;
		padding: 0.3rem 0.7rem;
		border: 1px solid var(--ffs-line);
		border-radius: 999px;
		font-size: 0.88rem;
	}

	body:not(.elementor-page) main .ffs-filter__sublist a.ffs-filter__link.is-active:not(.wp-element-button):not(.button):not(.wc-block-components-button) {
		border-color: var(--ffs-accent);
	}
}