/*///////////////////////////
Apogee Shop Sidebar — shared by the Categories (.apf--cats) and Filters (.apf--filters) blocks.

Every rule is scoped as .apf:not(#apf-x). Nothing has that id, so it matches every block, but
:not(#…) counts as an id for specificity — so no class/element-based theme rule
(.widget ul li, .widget-area .widget a…) can override the plugin.

Appearance settings are output inline after this file with the same scope. To override
from the child theme, use the same prefix: .apf:not(#apf-x) .apf__title { … }
///////////////////////////*/

.apf:not(#apf-x) {
	--apf-heading: #2b2b2b;
	--apf-label: #5c5c5c;
	--apf-text: #3a3a3a;
	--apf-line: #c9c9c9;
	--apf-line-strong: #8a8a8a;
	--apf-icon: #9b9b9b;
	--apf-cat1-colour: var(--apf-heading);
	--apf-cat2-colour: var(--apf-text);
	--apf-option-colour: var(--apf-text);
	--apf-head-line: var(--apf-line-strong);
	--apf-box-line: var(--apf-line-strong);
	--apf-active: #222;
	--apf-btn-bg: #222;
	--apf-btn-bg-2: var(--apf-btn-bg);
	--apf-btn-text: #fff;
	--apf-box-bg: #fff;
	--apf-font-heading: inherit;
	--apf-font-body: inherit;

	/* Text styles (Appearance → Text styles). */
	--apf-title-font: var(--apf-font-heading);
	--apf-title-size: 16px;
	--apf-title-weight: 700;
	--apf-title-spacing: 0.14em;
	--apf-title-case: uppercase;
	--apf-cat1-font: var(--apf-font-heading);
	--apf-cat1-size: 12px;
	--apf-cat1-weight: 700;
	--apf-cat1-spacing: 0.06em;
	--apf-cat1-case: uppercase;
	--apf-cat2-font: var(--apf-font-body);
	--apf-cat2-size: 12px;
	--apf-cat2-weight: 400;
	--apf-cat2-spacing: 0em;
	--apf-cat2-case: none;
	--apf-label-font: var(--apf-font-body);
	--apf-label-size: 11px;
	--apf-label-weight: 700;
	--apf-label-spacing: 0.06em;
	--apf-label-case: uppercase;
	--apf-option-font: var(--apf-font-body);
	--apf-option-size: 13px;
	--apf-option-weight: 400;
	--apf-option-spacing: 0em;
	--apf-option-case: none;
	--apf-button-font: var(--apf-font-heading);
	--apf-button-size: 10px;
	--apf-button-weight: 700;
	--apf-button-spacing: 0.12em;
	--apf-button-case: uppercase;

	font-family: var(--apf-font-body);
	font-size: 14px;
	color: var(--apf-text);
}

/*///////////////////////////
Resets — keep theme widget styles (list bullets, borders, link colours) out
///////////////////////////*/

.apf:not(#apf-x) ul,
.apf:not(#apf-x) li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	background: none;
}

.apf:not(#apf-x) li::before,
.apf:not(#apf-x) li::after {
	content: none;
}

.apf:not(#apf-x) a {
	box-shadow: none;
	text-decoration: none;
}

/*///////////////////////////
Heading
///////////////////////////*/

.apf:not(#apf-x) .apf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--apf-head-line);
}

.apf:not(#apf-x) .apf__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--apf-title-font);
	font-size: var(--apf-title-size);
	font-weight: var(--apf-title-weight);
	letter-spacing: var(--apf-title-spacing);
	text-transform: var(--apf-title-case);
	line-height: 1.2;
	color: var(--apf-heading);
}

.apf:not(#apf-x) .apf__toggle {
	appearance: none;
	flex: none;
	margin: 0 0 0 auto;
	padding: 4px;
	border: 1px solid var(--apf-heading);
	border-radius: 0;
	background: none;
	box-shadow: none;
	line-height: 0;
	color: var(--apf-heading);
	cursor: pointer;
}

.apf:not(#apf-x) .apf__toggle:hover,
.apf:not(#apf-x) .apf__toggle:focus {
	border-color: var(--apf-active);
	background: none;
	color: var(--apf-active);
}

/* Categories toggle only exists on mobile. */
.apf:not(#apf-x) .apf__toggle--mobile {
	border: 0;
}

/* The whole heading row opens and closes the categories: the button's hit
   area is stretched over the heading (it stays the one real control). */
.apf:not(#apf-x) .apf__head {
	position: relative;
}

.apf:not(#apf-x) .apf__toggle--mobile::after {
	content: "";
	position: absolute;
	inset: -8px 0 0;
}

.apf:not(#apf-x) .apf__head:has(.apf__toggle--mobile:hover) .apf__title,
.apf:not(#apf-x) .apf__head:has(.apf__toggle--mobile:focus-visible) .apf__title {
	color: var(--apf-active);
}

.apf:not(#apf-x) .apf__toggle--mobile .apf__chev {
	color: inherit;
}

.apf:not(#apf-x).is-collapsed .apf__toggle--mobile .apf__chev {
	transform: rotate(-90deg);
}

@media (min-width: 768px) {
	.apf:not(#apf-x) .apf__toggle--mobile {
		display: none;
	}
}

.apf:not(#apf-x).is-collapsed .apf__body {
	display: none;
}

/*///////////////////////////
Sections
///////////////////////////*/

.apf:not(#apf-x) .apf__section {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--apf-line);
}

.apf:not(#apf-x) .apf__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 0 7px;
	list-style: none;
	font-family: var(--apf-label-font);
	font-size: var(--apf-label-size);
	font-weight: var(--apf-label-weight);
	letter-spacing: var(--apf-label-spacing);
	text-transform: var(--apf-label-case);
	line-height: 1.3;
	color: var(--apf-label);
	cursor: pointer;
	user-select: none;
}

.apf:not(#apf-x) .apf__label::-webkit-details-marker { display: none; }
.apf:not(#apf-x) .apf__label::marker { content: ''; }

.apf:not(#apf-x) .apf__label:focus-visible,
.apf:not(#apf-x) .apf__toggle:focus-visible,
.apf:not(#apf-x) .apf__option:focus-visible,
.apf:not(#apf-x) .apf__clear:focus-visible {
	outline: 2px solid var(--apf-active);
	outline-offset: 2px;
}

.apf:not(#apf-x) .apf__badge {
	color: var(--apf-active);
}

.apf:not(#apf-x) .apf__chev {
	flex: none;
	color: var(--apf-icon);
	transition: transform 0.2s ease;
}

.apf:not(#apf-x) .apf__section[open] .apf__chev {
	transform: rotate(180deg);
}

/*///////////////////////////
Options
///////////////////////////*/

.apf:not(#apf-x) .apf__list,
.apf:not(#apf-x) .apf__list li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	background: none;
}

.apf:not(#apf-x) ul.apf__list {
	padding: 2px 0 10px;
}

/* Long lists: height set under Filters → Long lists (--apf-list-max only exists when ticked). */
.apf:not(#apf-x) .apf__section > ul.apf__list,
.apf:not(#apf-x) .apf__section > ul.apf__range-fallback {
	max-height: var(--apf-list-max, none);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--apf-box-line) transparent;
}

.apf:not(#apf-x) .apf__section > ul.apf__list::-webkit-scrollbar {
	width: 4px;
}

.apf:not(#apf-x) .apf__section > ul.apf__list::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background: var(--apf-box-line);
}

.apf:not(#apf-x) .apf__list li::before {
	display: none;
}

.apf:not(#apf-x) .apf__option {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 0;
	border: 0;
	box-shadow: none;
	font-family: var(--apf-option-font);
	font-size: var(--apf-option-size);
	font-weight: var(--apf-option-weight);
	letter-spacing: var(--apf-option-spacing);
	text-transform: var(--apf-option-case);
	line-height: 1.35;
	color: var(--apf-option-colour);
	text-decoration: none;
}

.apf:not(#apf-x) .apf__option:hover,
.apf:not(#apf-x) .apf__option:focus {
	color: var(--apf-active);
	text-decoration: none;
}

.apf:not(#apf-x) .apf__box {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	border: 1px solid var(--apf-box-line);
	background: var(--apf-box-bg);
}

.apf:not(#apf-x) .apf__option.is-active .apf__box {
	border-color: var(--apf-active);
	background: var(--apf-active);
}

.apf:not(#apf-x) .apf__option.is-active .apf__box::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.apf:not(#apf-x) .apf__name {
	flex: 1 1 auto;
}

.apf:not(#apf-x) .apf__num {
	font-size: 11px;
	color: var(--apf-icon);
}

.apf:not(#apf-x) .apf__option--cat.is-current {
	font-weight: 700;
	color: var(--apf-active);
}

/*///////////////////////////
Categories block
///////////////////////////*/

.apf:not(#apf-x) .apf__cat-link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--apf-cat2-colour);
}

.apf:not(#apf-x) .apf__cat-link:hover,
.apf:not(#apf-x) .apf__cat-link:focus {
	color: var(--apf-active);
}

/* Top level: uppercase, heading font, divider under each (and its sub-list). */
.apf:not(#apf-x) li.apf__cat--d0 {
	border-bottom: 1px solid var(--apf-line);
}

.apf:not(#apf-x) .apf__cat--d0 > .apf__cat-link {
	padding: 10px 0 9px;
	font-family: var(--apf-cat1-font);
	font-size: var(--apf-cat1-size);
	font-weight: var(--apf-cat1-weight);
	letter-spacing: var(--apf-cat1-spacing);
	text-transform: var(--apf-cat1-case);
	line-height: 1.3;
	color: var(--apf-cat1-colour);
}

/* Sub-categories: indented, sentence case, no dividers. */
.apf:not(#apf-x) ul.apf__cats--sub {
	padding: 0 0 8px 12px;
}

.apf:not(#apf-x) ul.apf__cats--sub ul.apf__cats--sub {
	padding-bottom: 0;
}

.apf:not(#apf-x) .apf__cats--sub .apf__cat-link {
	padding: 5px 0;
	font-family: var(--apf-cat2-font);
	font-size: var(--apf-cat2-size);
	font-weight: var(--apf-cat2-weight);
	letter-spacing: var(--apf-cat2-spacing);
	text-transform: var(--apf-cat2-case);
	line-height: 1.35;
}

.apf:not(#apf-x) .apf__cat.is-current > .apf__cat-link,
.apf:not(#apf-x) .apf__cat.is-ancestor > .apf__cat-link {
	color: var(--apf-active);
}

/* Same weight as the top-level rule above, so hover must come last to win. */
.apf:not(#apf-x) .apf__cat > .apf__cat-link:hover,
.apf:not(#apf-x) .apf__cat > .apf__cat-link:focus {
	color: var(--apf-active);
}

.apf:not(#apf-x) .apf__cat-link .apf__name {
	flex: 1 1 auto;
}

/*///////////////////////////
Range sliders
///////////////////////////*/

.apf:not(#apf-x) .apf__range {
	padding: 4px 2px 16px;
}

.apf:not(#apf-x) .apf__range[hidden] {
	display: none;
}

.apf:not(#apf-x) .apf__range-out {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--apf-text);
}

.apf:not(#apf-x) .apf__slider {
	--apf-lo: 0%;
	--apf-hi: 100%;
	position: relative;
	height: 16px;
	margin: 0 7px;
}

/* Track and selected span */
.apf:not(#apf-x) .apf__slider::before,
.apf:not(#apf-x) .apf__slider::after {
	content: '';
	position: absolute;
	top: 7px;
	height: 2px;
	border-radius: 1px;
}

.apf:not(#apf-x) .apf__slider::before {
	left: 0;
	right: 0;
	background: var(--apf-line);
}

.apf:not(#apf-x) .apf__slider::after {
	left: var(--apf-lo);
	right: calc(100% - var(--apf-hi));
	background: var(--apf-active);
}

.apf:not(#apf-x) .apf__thumb {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: 3;
	top: 0;
	left: -7px;
	width: calc(100% + 14px);
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	outline: none;
}

.apf:not(#apf-x) .apf__thumb::-webkit-slider-runnable-track {
	height: 16px;
	background: none;
	border: 0;
}

.apf:not(#apf-x) .apf__thumb::-moz-range-track {
	height: 16px;
	background: none;
	border: 0;
}

.apf:not(#apf-x) .apf__thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	border: 2px solid var(--apf-active);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.apf:not(#apf-x) .apf__thumb::-moz-range-thumb {
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid var(--apf-active);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	pointer-events: auto;
}

.apf:not(#apf-x) .apf__thumb:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.apf:not(#apf-x) .apf__thumb:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* No-JS price form: unstyled range inputs plus an Apply button. */
.apf:not(#apf-x) .apf__go {
	margin-top: 12px;
	padding: 6px 12px;
	border: 1px solid var(--apf-box-line);
	border-radius: 0;
	background: none;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--apf-text);
	cursor: pointer;
}

.apf:not(#apf-x) .apf__range.is-ready .apf__go {
	display: none;
}

/*///////////////////////////
Clear button
///////////////////////////*/

.apf:not(#apf-x) .apf__clear {
	display: block;
	margin-top: 30px;
	padding: 12px 16px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(90deg, var(--apf-btn-bg), var(--apf-btn-bg-2));
	font-family: var(--apf-button-font);
	font-size: var(--apf-button-size);
	font-weight: var(--apf-button-weight);
	letter-spacing: var(--apf-button-spacing);
	text-transform: var(--apf-button-case);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--apf-btn-text);
	transition: filter 0.2s ease;
}

/* Theme link colours (incl. :visited) otherwise win here. */
.apf:not(#apf-x) a.apf__clear,
.apf:not(#apf-x) a.apf__clear:link,
.apf:not(#apf-x) a.apf__clear:visited,
.apf:not(#apf-x) a.apf__clear:hover,
.apf:not(#apf-x) a.apf__clear:focus,
.apf:not(#apf-x) a.apf__clear:active {
	color: var(--apf-btn-text) !important;
	text-decoration: none;
}

.apf:not(#apf-x) a.apf__clear:hover,
.apf:not(#apf-x) a.apf__clear:focus {
	filter: brightness(1.08);
}

/* Shown with nothing to clear ("always show" setting): visibly off. */
.apf:not(#apf-x) .apf__clear.is-idle {
	opacity: 0.35;
	filter: grayscale(1);
	cursor: default;
	pointer-events: none;
}

/*///////////////////////////
States and utilities
///////////////////////////*/

.apf:not(#apf-x).is-loading .apf__body {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.apf:not(#apf-x) .apf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.apf:not(#apf-x) .apf__chev,
	.apf:not(#apf-x) .apf__clear,
	.apf:not(#apf-x).is-loading .apf__body {
		transition: none;
	}
}