/* Stratechna Product Filter — frontend styles
 * Usa a variável --spf-accent (definida inline pelo plugin, conforme
 * a definição "Cor de destaque") para que o mesmo CSS sirva qualquer
 * loja Stratechna sem precisar de recompilar nada. */

.spf-filter {
	--spf-accent: #F5A524;
	--spf-text: #1a1a1a;
	--spf-muted: #6b7280;
	--spf-border: #e5e7eb;
	font-size: 14px;
	color: var(--spf-text);
}

.spf-group {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--spf-border);
}
.spf-group:last-child {
	border-bottom: none;
}

.spf-group-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--spf-text);
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--spf-accent);
}

/* ── Árvore de categorias (expansível, estilo Husky) ────────────
 * Pedido explícito do utilizador (2026-08-19): mostrar sempre todas
 * as categorias, com a possibilidade de abrir/fechar subcategorias em
 * vez de a lista ser substituída ao seleccionar uma categoria. Sem
 * JavaScript, a árvore fica sempre totalmente expandida (baseline
 * abaixo); o JS (spf-frontend.js) é que colapsa os ramos que não
 * estejam no caminho da categoria activa. */
.spf-cat-tree {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Alto o suficiente para caber as ~14 categorias principais da loja
	 * sem scroll interno — pedido explícito do utilizador (2026-08-19):
	 * "tornar essa janela mais comprida de forma a caberem todas as
	 * categorias principais". Mantém overflow-y:auto como rede de
	 * segurança: se a loja vier a ter muitas mais categorias no futuro,
	 * volta a aparecer scroll em vez de a caixa crescer sem limite. */
	max-height: 640px;
	overflow-y: auto;
}
.spf-cat-tree::-webkit-scrollbar { width: 4px; }
.spf-cat-tree::-webkit-scrollbar-thumb { background: var(--spf-accent); border-radius: 2px; }
.spf-cat-tree::-webkit-scrollbar-track { background: #f0f0f0; }

.spf-cat-children {
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;
	display: block; /* baseline sem JS: tudo visível */
}
.spf-cat-node.is-collapsed > .spf-cat-children {
	display: none;
}

.spf-cat-row {
	display: flex;
	align-items: center;
	gap: 2px;
	/* afasta a contagem da margem direita — pedido explícito do
	 * utilizador (2026-08-19): "a contagem de produtos devia estar um
	 * pouco afastada da margem direita". */
	padding-right: 8px;
}
.spf-cat-row .spf-option {
	/* já não estica — deixa de empurrar o botão de expandir para a
	 * extremidade direita; o botão fica logo a seguir ao nome, pedido
	 * explícito do utilizador (2026-08-19): "o icone de extensão das
	 * categorias devia estar a seguir à descrição, não depois da
	 * contagem de produtos". */
	flex: 0 0 auto;
	min-width: 0;
	/* o .spf-option genérico tem padding direito extra (para afastar a
	 * CONTAGEM da margem nos grupos de atributos) — aqui a contagem já
	 * não vive dentro do link, por isso esse padding só criava um
	 * espaço morto entre o nome e o botão de expandir. Pedido explícito
	 * do utilizador (2026-08-19): "colocar o icone de abertura das
	 * categorias mais próximo da descrição". */
	padding-right: 2px;
}
.spf-cat-row .spf-option .spf-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.spf-cat-row .spf-count {
	/* a contagem passa a ser irmã do link + botão (já não vive dentro
	 * do link) — margin-left:auto empurra-a sempre para a direita,
	 * independentemente de o nó ter ou não botão de expandir. */
	margin-left: auto;
	padding-left: 6px;
}

.spf-cat-toggle {
	/* maior, para se ver melhor — pedido explícito do utilizador
	 * (2026-08-19): "talvez maior para que se veja melhor". */
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--spf-text);
}
.spf-cat-toggle::before {
	content: "\25BE"; /* ▾ */
	font-size: 14px;
	display: inline-block;
	transition: transform 0.15s ease;
}
.spf-cat-node.is-collapsed > .spf-cat-row > .spf-cat-toggle::before {
	transform: rotate(-90deg);
}
.spf-cat-toggle--empty {
	visibility: hidden;
	cursor: default;
}

.spf-options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
}
.spf-options::-webkit-scrollbar { width: 4px; }
.spf-options::-webkit-scrollbar-thumb { background: var(--spf-accent); border-radius: 2px; }
.spf-options::-webkit-scrollbar-track { background: #f0f0f0; }

.spf-option {
	display: flex;
	align-items: center;
	gap: 9px;
	/* mais espaço do lado direito — pedido explícito do utilizador
	 * (2026-08-19): "de uma forma geral a contagem de produtos devia
	 * estar um pouco afastada da margem direita" (aplica-se a todos os
	 * grupos de atributos; a árvore de categorias tem a sua própria
	 * regra equivalente, .spf-cat-row, porque a contagem já não vive
	 * dentro do link nesse caso). */
	padding: 6px 10px 6px 2px;
	text-decoration: none;
	color: var(--spf-text);
	border-radius: 4px;
	transition: background 0.15s ease;
}
.spf-option:hover {
	background: #f9fafb;
	color: var(--spf-text);
}

.spf-box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid #cbd5e1;
	border-radius: 4px;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.spf-option.is-active .spf-box {
	background: var(--spf-accent);
	border-color: var(--spf-accent);
}
.spf-option.is-active .spf-box::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.spf-label {
	flex: 1 1 auto;
	font-size: 13.5px;
	line-height: 1.35;
}
.spf-option.is-active .spf-label {
	font-weight: 600;
}

.spf-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--spf-muted);
}

/* ── Marca em maiúsculas — pedido explícito do utilizador (2026-08-19).
 * Texto em maiúsculas "pesa" visualmente mais do que o mesmo tamanho em
 * minúsculas — por isso o tamanho é ligeiramente menor do que o resto
 * das opções, para não ficar demasiado destacado (2º pedido explícito,
 * 2026-08-19: "o tamanho de letra das marcas está demasiado
 * destacado"). ──────────────────────────────────────────────────── */
.spf-group--brand .spf-label {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.01em;
}

/* ── Chips de filtros aplicados ─────────────────────────────── */
.spf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}
.spf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: #fff7ec;
	border: 1px solid var(--spf-accent);
	color: var(--spf-text);
	border-radius: 999px;
	font-size: 12.5px;
	text-decoration: none;
	line-height: 1.2;
}
.spf-chip:hover { background: var(--spf-accent); color: #fff; }
.spf-chip-x { font-size: 14px; line-height: 1; }

.spf-clear-all {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	color: var(--spf-muted);
	text-decoration: underline;
	padding: 5px 4px;
}
.spf-clear-all:hover { color: var(--spf-accent); }

/* ── Chips relocalizados para cima de "A mostrar X de Y resultados"
 * (pedido explícito do utilizador, 2026-08-19) — feito via JS
 * (spf-frontend.js), esta classe só ajusta o espaçamento para a nova
 * posição (fora da barra lateral estreita, acima da grelha). ──────── */
.spf-chips.spf-chips--top {
	margin: 0 0 16px;
}

/* ── Preço — reformulado (2º pedido explícito, 2026-08-19: "não estou a
 * gostar da forma como aparece"). Ordem invertida em relação à 1ª
 * versão: slider primeiro (é o que mais se usa), campos numéricos por
 * baixo, mais compactos, com sufixo "€" e um botão "Aplicar" pequeno e
 * discreto (seta) em vez do botão grande de texto — o slider já
 * submete sozinho ao soltar, o botão é só para quem escreve o valor à
 * mão. ─────────────────────────────────────────────────────────── */
.spf-price-form {
	display: flex;
	flex-direction: column;
}
/* "spf-price-fields" (slider + inputs) e o botão "Aplicar" são
 * irmãos, lado a lado — assim o slider e a linha de inputs, que estão
 * os dois DENTRO de "spf-price-fields", ficam sempre com exactamente a
 * mesma largura um do outro (o botão fica de fora, não entra nessa
 * largura) e a barra do slider acaba alinhada com a borda direita da
 * caixa de preço máximo — pedido explícito do utilizador (2026-08-19).
 */
.spf-price-body {
	display: flex;
	/* topo, não centro — para o botão ficar à mesma altura da LINHA DE
	 * CIMA (as caixas de valores, agora que o slider passou para
	 * baixo) em vez de ficar centrado no bloco inteiro (2 linhas).
	 * Pedido explícito do utilizador (2026-08-19): caixas "alinhadas
	 * com o botão". */
	align-items: flex-start;
	gap: 8px;
}
.spf-price-fields {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.spf-price-inputs {
	display: flex;
	align-items: center;
	/* as duas caixas ficam encostadas às pontas (uma à esquerda, outra
	 * à direita) com o traço a meio — a largura total da linha
	 * mantém-se igual à do slider por baixo, mesmo com caixas mais
	 * pequenas. */
	justify-content: space-between;
}
.spf-price-field {
	position: relative;
	flex: 0 0 auto;
}
.spf-price-field input[type="number"] {
	/* mais pequenas — pedido explícito do utilizador (2026-08-19) — e
	 * com a mesma altura do botão "Aplicar" (30px), para as duas coisas
	 * ficarem visualmente alinhadas na mesma linha. */
	width: 78px;
	height: 30px;
	box-sizing: border-box;
	padding: 0 22px 0 8px;
	border: 1px solid var(--spf-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--spf-text);
	/* números alinhados à direita — pedido explícito do utilizador
	 * (2026-08-19). */
	text-align: right;
	transition: border-color 0.15s ease;
	/* esconde as setas nativas do input number — ficam mais limpos com
	 * o slider já a tratar do ajuste "por arrasto". */
	-moz-appearance: textfield;
}
.spf-price-field input[type="number"]::-webkit-inner-spin-button,
.spf-price-field input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.spf-price-field input[type="number"]:focus {
	outline: none;
	border-color: var(--spf-accent);
}
.spf-price-currency {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--spf-muted);
	pointer-events: none;
}
.spf-price-sep {
	color: var(--spf-muted);
	flex: 0 0 auto;
	font-size: 12px;
}
.spf-price-apply {
	flex: 0 0 auto;
	/* !important porque o botão genérico do tema define padding/altura
	 * próprios (19px 32px, ~38px de altura) com especificidade
	 * suficiente para ganhar ao nosso width/height — é a mesma classe
	 * de problema que já tínhamos tido com os inputs do slider. Sem
	 * isto o botão ficava mais alto/largo do que as caixas de preço,
	 * pedido explícito do utilizador (2026-08-19): "devem ficar do
	 * mesmo tamanho do botão". */
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--spf-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}
.spf-price-apply:hover { opacity: 0.9; }

/* ── Selector de preço com dois cursores (estilo Husky) — pedido
 * explícito do utilizador (2026-08-19). Dois <input type="range">
 * sobrepostos, cada um só "clicável" pelo próprio cursor (o resto do
 * input é transparente a cliques), com uma barra de progresso entre os
 * dois a indicar visualmente o intervalo seleccionado. ──────────── */
.spf-price-slider {
	position: relative;
	/* menos espaço acima da linha (já não é preciso, o triângulo agora
	 * fica por baixo) e um pouco por baixo para o caber. */
	height: 20px;
	/* sem margem horizontal — a caixa do slider fica com a MESMA
	 * largura da linha de inputs (ambas dentro de "spf-price-fields"),
	 * pedido explícito do utilizador (2026-08-19). */
	margin: 0;
}
/* A track fica encostada (inset) por metade da largura do cursor
 * (6px, cursor tem 12px) em cada ponta — o browser nunca deixa o
 * centro do cursor chegar às pontas exactas de um <input type="range">
 * de largura 100% (reserva sempre meia largura do próprio cursor para
 * ele não sair da caixa); sem este ajuste a track (a linha) parecia
 * maior do que o percurso real dos cursores — pedido explícito do
 * utilizador (2026-08-19): "os seletores aparecem mais dentro do que
 * os limites mas não deviam". Com este inset a ponta da track coincide
 * exactamente com a posição do cursor no mínimo/máximo. */
.spf-price-track {
	position: absolute;
	top: 50%;
	left: 6px;
	right: 6px;
	height: 4px;
	background: var(--spf-border);
	border-radius: 2px;
	transform: translateY(-50%);
}
.spf-price-track-fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--spf-accent);
	border-radius: 2px;
}
.spf-price-range {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 4px;
	margin: 0;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
	/* !important porque o tema define um estilo genérico para inputs
	 * (fundo branco + contorno) com especificidade suficiente para
	 * sobrepor esta regra, escondendo a barra de progresso por baixo. */
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.spf-price-range:focus { outline: none !important; box-shadow: none !important; }
.spf-price-range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
	height: 4px;
}
/* Cursores em triângulo — pedido explícito do utilizador (2026-08-19).
 * 1ª tentativa: caixa centrada na linha (comportamento nativo) com o
 * vértice a meio — ficava fundido com a track, da mesma cor. 2ª
 * tentativa: triângulo levantado ACIMA da linha. 3ª tentativa (esta):
 * o utilizador pediu para os triângulos ficarem por BAIXO da linha —
 * inverte-se o sinal do "margin-top" (agora positivo, empurra para
 * baixo) e o vértice passa para o TOPO da caixa (0%, em vez de 100%),
 * para continuar a apontar para a linha, agora vindo de baixo. */
.spf-price-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 12px;
	height: 10px;
	margin-top: 7px;
	background: var(--spf-accent);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
	border: none;
	border-radius: 0;
	cursor: pointer;
}
.spf-price-range::-moz-range-track {
	background: transparent;
	height: 4px;
	border: none;
}
.spf-price-range::-moz-range-thumb {
	pointer-events: auto;
	width: 12px;
	height: 10px;
	margin-top: 7px;
	background: var(--spf-accent);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.3));
	border: none;
	border-radius: 0;
	cursor: pointer;
}
.spf-price-range--min { z-index: 4; }
.spf-price-range--max { z-index: 3; }
.spf-price-range--min.is-top-priority { z-index: 5; }

.spf-filter.spf-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ── Spinner de carregamento — pedido explícito do utilizador
 * (2026-08-19): "enquanto não aparecem resultados devia aparecer um
 * spinner". O filtro recarrega a página inteira (GET, sem AJAX, de
 * propósito — ver nota no topo de class-spf-query.php), por isso a
 * forma mais fiável de dar feedback imediato é uma sobreposição a
 * ecrã inteiro, mostrada via JS assim que se clica numa opção — fica
 * visível até a nova página carregar (não é preciso escondê-la depois:
 * a navegação substitui todo o DOM). ────────────────────────────── */
.spf-page-loader {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.65);
	z-index: 999999;
	align-items: center;
	justify-content: center;
}
.spf-page-loader.is-visible {
	display: flex;
}
.spf-spinner {
	width: 88px;
	height: 88px;
	border: 8px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--spf-accent);
	border-radius: 50%;
	animation: spf-spin 0.75s linear infinite;
}
@keyframes spf-spin {
	to { transform: rotate(360deg); }
}

/* ── "Bottom sheet" de filtros em mobile/tablet ─────────────────
 * Pedido explícito do utilizador (2026-08-19): em ecrãs pequenos a
 * barra de filtros inteira (dezenas de categorias/marcas/atributos)
 * ficava sempre em coluna por cima da grelha de produtos — cerca de
 * 5000px de scroll antes de aparecer um único produto. Passa a abrir
 * como painel a subir de baixo ("bottom sheet"), padrão confirmado
 * com o utilizador por ser o mais usado em e-commerce mobile
 * actual (Zara/Amazon/Booking) e por evitar o conflito com o gesto
 * nativo "voltar atrás" do iOS (que usa a margem esquerda do ecrã,
 * ao contrário de uma gaveta lateral). Escondido por omissão aqui —
 * só aparece dentro da media query mais abaixo (ecrãs pequenos); em
 * ecrã grande o filtro continua a ser a sidebar normal, em fluxo. */
.spf-filters-fab { display: none; }
.spf-sheet-backdrop { display: none; }
.spf-sheet-header,
.spf-sheet-footer { display: none; }

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 782px) {
	.spf-options { max-height: 240px; }
	.spf-cat-tree { max-height: 280px; }

	/* Botão flutuante, sempre alcançável com o polegar, com contador
	 * de filtros activos. */
	.spf-filters-fab {
		display: flex;
		align-items: center;
		gap: 7px;
		position: fixed;
		left: 50%;
		bottom: 18px;
		transform: translateX(-50%);
		z-index: 100001;
		/* Cor fixa (não var(--spf-text)): o FAB é movido para
		 * document.body via JS em mobile, ficando fora do escopo
		 * de .spf-filter onde a variável está definida — usar var()
		 * aqui resultava em "background: transparent" (botão
		 * invisível, mesma cor do fundo da página). */
		/* Fundo semi-transparente com "vidro fosco" (2026-08-19,
		 * pedido explícito do utilizador) em vez de preto sólido —
		 * mantém o badge laranja com bom contraste e fica com um ar
		 * mais leve/moderno sobre o conteúdo por baixo. */
		background: rgba(26, 26, 26, 0.72) !important;
		-webkit-backdrop-filter: blur(10px) saturate(160%);
		backdrop-filter: blur(10px) saturate(160%);
		color: #fff !important;
		border: 1px solid rgba(255, 255, 255, 0.14) !important;
		border-radius: 999px;
		padding: 13px 22px;
		font-size: 14px;
		font-weight: 700;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
		cursor: pointer;
	}
	.spf-filters-fab-icon { display: flex; color: inherit; }
	.spf-filters-fab-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--spf-accent) !important;
		color: #1a1a1a !important;
		font-size: 12px;
		font-weight: 800;
	}

	/* Fundo semi-transparente atrás do painel — fecha ao tocar fora. */
	.spf-sheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 100000;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.spf-sheet-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* O painel de filtros passa a "bottom sheet": fixo ao fundo do
	 * ecrã, escondido por omissão (translateY 100%), a subir com
	 * transição suave ao acrescentar "is-open". Scroll próprio (as
	 * caixas internas de cada grupo continuam com o seu próprio
	 * max-height, aninhadas sem conflito). */
	.spf-filter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 88vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
		z-index: 100002;
		padding: 0 16px 0;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}
	.spf-filter.is-open {
		transform: translateY(0);
	}

	.spf-sheet-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		background: #fff;
		padding: 10px 0 12px;
		margin: 0 -16px 12px;
		border-bottom: 1px solid var(--spf-border);
		z-index: 1;
	}
	.spf-sheet-handle {
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: var(--spf-border);
	}
	.spf-sheet-title {
		font-size: 15px;
		font-weight: 700;
		margin-top: 8px;
	}
	.spf-sheet-close {
		position: absolute;
		right: 0;
		top: 6px;
		width: 36px;
		height: 36px;
		border: none;
		background: transparent;
		font-size: 22px;
		line-height: 1;
		color: var(--spf-muted);
		cursor: pointer;
	}

	/* Rodapé fixo dentro do painel — cada opção já é um link que
	 * navega imediatamente (ver nota na classe SPF_Render), por isso
	 * este botão nunca precisa de "aplicar" nada, só fecha o painel. */
	.spf-sheet-footer {
		display: block;
		position: sticky;
		bottom: 0;
		background: #fff;
		margin: 16px -16px 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--spf-border);
	}
	.spf-sheet-apply {
		width: 100%;
		border: none !important;
		border-radius: 8px !important;
		/* !important porque o tema define um estilo genérico para
		 * botões (fundo acastanhado + texto cinzento) com especificidade
		 * suficiente para sobrepor esta regra — mesmo padrão já visto
		 * no botão "Aplicar" do preço (.spf-price-apply). */
		background: var(--spf-accent) !important;
		color: #1a1a1a !important;
		font-size: 15px;
		font-weight: 700;
		padding: 14px !important;
		cursor: pointer;
	}

	/* Alvos de toque maiores — pedido explícito do utilizador
	 * (2026-08-19). */
	.spf-cat-toggle {
		width: 40px;
		height: 40px;
	}
	.spf-cat-toggle::before {
		font-size: 18px;
	}
	.spf-price-range::-webkit-slider-thumb {
		width: 26px;
		height: 22px;
		margin-top: 15px;
	}
	.spf-price-range::-moz-range-thumb {
		width: 26px;
		height: 22px;
		margin-top: 15px;
	}
}