/* =============================================================================
   Product Filters by Pixel Partners
   --------------------------------------------------------------------------
   Estética editorial: paleta neutra, serifa Cormorant Garamond para títulos
   (com a 2ª palavra em itálico), Inter para UI. Linhas finas, contagens em
   monoespaço, swatches circulares discretas, checkboxes quadradas finas.
   ========================================================================== */

/* -- Reset suave dentro dos componentes (sem brigar com Flatsome) ----------- */
.ppf-cat-header,
.ppf-w {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ppf-ink, #1a1a1a);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Esconde o conteúdo padrão (título + descrição + breadcrumb interno) que
   o Flatsome injeta no .page-title. Vamos preencher o mesmo wrapper com
   nosso markup editorial via hook flatsome_category_title. */
body.ppf-header-on .page-title-inner > h1,
body.ppf-header-on .page-title-inner > h1.entry-title,
body.ppf-header-on .page-title-inner > .is-large,
body.ppf-header-on .page-title-inner > .is-medium,
body.ppf-header-on .page-title-inner > .woocommerce-breadcrumb,
body.ppf-header-on .page-title-inner > .breadcrumbs,
body.ppf-header-on .shop-page-title,
body.ppf-header-on .woocommerce-products-header,
body.ppf-header-on .woocommerce-products-header__title,
body.ppf-header-on .term-description {
	display: none !important;
}

/* ============================================================================
   1) CABEÇALHO EDITORIAL — pinta .page-title (nativo) ou .ppf-cat-header--fallback-wrap
   --------------------------------------------------------------------------
   ESTRATÉGIA DE LARGURA (v1.0.6):
   - O wrapper externo (.page-title) é SEMPRE full-width 100% naturalmente —
     ou pelo Flatsome (caminho A) ou pelo nosso fallback (caminho B).
   - O conteúdo interno NÃO usa max-width hardcoded. Em vez disso, usa
     PADDING horizontal controlável (--ppf-pad-x) que pode ser ajustado
     pelo lojista. Isso permite ALINHAR com o grid de produtos sem
     adivinhar a "Site Width" do Flatsome.
   - Pra alinhar perfeitamente, basta usar o mesmo padding lateral que o
     tema usa no .row (geralmente 15-30px) somado ao site-width offset.
     Para a maioria das instalações, 30px funciona como padrão.
   ========================================================================== */

/* Pinta o wrapper full-width (nativo OU fallback) */
body.ppf-header-on .page-title,
body.ppf-header-on .ppf-cat-header--fallback-wrap {
	/* FORÇA VISIBILIDADE — muitos temas/lojas Flatsome escondem o
	   .page-title padrão (Theme Options "Title: Hidden" ou CSS custom
	   tipo `.page-title{display:none}`). Como reusamos essa classe como
	   wrapper do cabeçalho editorial, precisamos sobrepor esse ocultamento.
	   A especificidade (body.ppf-header-on .page-title) vence regras de
	   classe única, e o !important vence display:none inline não-important. */
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;

	background: var(--ppf-bg, #f3efe6) !important;
	padding-top: var(--ppf-header-pad-y, 64px) !important;
	padding-bottom: var(--ppf-header-pad-y, 64px) !important;
	margin: 0 0 32px !important;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2) !important;
	min-height: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Garante que o conteúdo interno do cabeçalho também não herde ocultamento. */
body.ppf-header-on .page-title .ppf-cat-header,
body.ppf-header-on .ppf-cat-header--fallback-wrap .ppf-cat-header {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Reseta o .page-title-inner do Flatsome (que tem max-width próprio) e
   também controla nosso wrap. Aplica o padding horizontal configurável. */
body.ppf-header-on .page-title-inner,
body.ppf-header-on .ppf-cat-header--fallback-wrap > .page-title-inner {
	background: transparent !important;
	padding: 0 var(--ppf-header-pad-x, 30px) !important;
	margin: 0 auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	text-align: left !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Wrapper de conteúdo interno do plugin — sem max-width, ocupa o espaço
   que o .page-title-inner liberou (já com padding aplicado). */
.ppf-cat-header {
	width: 100%;
	box-sizing: border-box;
}

/* Breadcrumbs */
.ppf-cat-header__bc {
	margin-bottom: 36px;
}
.ppf-cat-header__bc ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ppf-cat-header__bc li {
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
}
.ppf-cat-header__bc a {
	color: var(--ppf-muted, #8a8378);
	text-decoration: none;
	transition: color .2s ease;
}
.ppf-cat-header__bc a:hover {
	color: var(--ppf-ink, #1a1a1a);
}
.ppf-cat-header__bc [aria-current="page"] {
	color: var(--ppf-ink, #1a1a1a);
}
.ppf-cat-header__bc .ppf-bc-sep {
	color: var(--ppf-muted, #8a8378);
	opacity: 0.5;
	margin: 0 2px;
}

/* Título serifado editorial */
.ppf-cat-header__title {
	font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	font-weight: 400;
	font-size: clamp(48px, 7vw, 92px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--ppf-ink, #1a1a1a);
	margin: 0 0 24px;
}
.ppf-cat-header__title-lead {
	font-style: normal;
	font-weight: 400;
}
.ppf-cat-header__title-emph {
	font-style: italic;
	font-weight: 500;
}

/* Descrição */
.ppf-cat-header__desc {
	max-width: 560px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ppf-ink, #1a1a1a);
	opacity: 0.78;
	font-weight: 400;
	margin: 0;
}
.ppf-cat-header__desc p { margin: 0 0 0.6em; }
.ppf-cat-header__desc p:last-child { margin: 0; }

@media (max-width: 768px) {
	/* Em mobile reduzimos o padding vertical e horizontal para evitar
	   excesso de espaço em telas pequenas, mantendo a configuração
	   do lojista como teto. */
	body.ppf-header-on .page-title,
	body.ppf-header-on .ppf-cat-header--fallback-wrap {
		padding-top: clamp(28px, 8vw, var(--ppf-header-pad-y, 64px)) !important;
		padding-bottom: clamp(28px, 8vw, var(--ppf-header-pad-y, 64px)) !important;
	}
	body.ppf-header-on .page-title-inner,
	body.ppf-header-on .ppf-cat-header--fallback-wrap > .page-title-inner {
		padding-left: clamp(15px, 5vw, var(--ppf-header-pad-x, 30px)) !important;
		padding-right: clamp(15px, 5vw, var(--ppf-header-pad-x, 30px)) !important;
	}
	.ppf-cat-header__bc { margin-bottom: 24px; }
	.ppf-cat-header__title { font-size: clamp(40px, 12vw, 60px); margin-bottom: 18px; }
	.ppf-cat-header__desc { font-size: 14px; }
}

/* ============================================================================
   1B) TOOLBAR DO CATÁLOGO (contagem + ordenação)
   --------------------------------------------------------------------------
   Nasce dentro da coluna principal do Flatsome via woocommerce_before_shop_loop,
   por isso herda automaticamente a largura e o alinhamento do grid de produtos.

   ALINHAMENTO COM A SIDEBAR:
   A borda inferior da toolbar PRECISA ficar na mesma altura Y da borda
   inferior do título do primeiro widget visível na sidebar (.ppf-w__head /
   .ppf-w--refinar .ppf-w__title). Para isso:
   - mesma altura de texto (11px / line-height 1)
   - mesmo padding-bottom (14px)
   - mesma espessura de border (1px)
   - reset agressivo de margin-top, neutralizando qualquer espaço que o
     Flatsome possa ter aplicado no início da coluna.
   ========================================================================== */

.ppf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	margin: 0 0 28px !important; /* !important para sobrescrever heranças do Flatsome */
	padding: 0 0 14px;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2);
	font-family: 'Inter', sans-serif;
	color: var(--ppf-ink, #1a1a1a);
	line-height: 1; /* normaliza altura para casar com os widgets */
	box-sizing: border-box;
}

/* Quando a toolbar é o primeiro filho da col de produtos, garantimos zero
   espaço acima — independentemente de classes residuais do Flatsome. */
.shop-container > .ppf-toolbar:first-child,
.products-row > .ppf-toolbar:first-child,
.col-inner > .ppf-toolbar:first-child,
.woocommerce-notices-wrapper + .ppf-toolbar {
	margin-top: 0 !important;
}

.ppf-toolbar__count {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
	font-variant-numeric: tabular-nums;
}

.ppf-toolbar__count-num {
	color: var(--ppf-ink, #1a1a1a);
	font-weight: 500;
	margin-right: 2px;
}

.ppf-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ppf-toolbar__sort-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
	margin: 0;
}

.ppf-orderby-form {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
}

.ppf-orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 4px 22px 4px 0;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ppf-ink, #1a1a1a);
	cursor: pointer;
	box-shadow: none !important;
	height: auto;
	line-height: 1.2;
	min-height: 0;
	transition: border-color .15s ease;
}

.ppf-orderby:hover {
	border-bottom-color: var(--ppf-line, #e6dfd2);
}

.ppf-orderby:focus {
	outline: 0;
	border-bottom-color: var(--ppf-ink, #1a1a1a);
}

.ppf-orderby__chev {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-65%);
	font-size: 14px;
	color: var(--ppf-muted, #8a8378);
	pointer-events: none;
	line-height: 1;
}

@media (max-width: 768px) {
	.ppf-toolbar { padding-bottom: 14px; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
	.ppf-toolbar__sort-label { display: none; }
}

/* ============================================================================
   2) WIDGETS DE FILTRO — SIDEBAR EDITORIAL
   ========================================================================== */

.ppf-w {
	margin: 0 0 36px;
	font-family: 'Inter', sans-serif;
}

/* O primeiro widget PPF que aparecer na sidebar precisa começar exatamente
   no topo da coluna, sem margin/padding herdado. Cobre os seletores comuns
   do Flatsome para "primeira widget de catálogo". */
.ppf-w:first-child,
.widget:first-child .ppf-w,
.shop-sidebar > .widget:first-child,
.shop-sidebar > .ppf-w:first-child,
#shop-sidebar > .widget:first-child,
#shop-sidebar > .ppf-w:first-child {
	margin-top: 0;
	padding-top: 0;
}

/* Limpar override do Flatsome em widgets dentro da nossa árvore */
.widget.ppf-w,
.widget-area .ppf-w,
#secondary .ppf-w {
	background: transparent;
	border: 0;
	padding: 0;
}

/* Cabeçalho do widget (botão accordion) */
.ppf-w__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0 0 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2);
	cursor: pointer;
	color: var(--ppf-ink, #1a1a1a);
	letter-spacing: 0;
	box-shadow: none !important;
	border-radius: 0;
	min-height: auto;
}
.ppf-w__head:hover { color: var(--ppf-ink, #1a1a1a); }
.ppf-w__head:focus { outline: 2px solid transparent; }
.ppf-w__head:focus-visible {
	outline: 2px solid var(--ppf-accent, #5a1a2a);
	outline-offset: 4px;
}

.ppf-w__title {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ppf-ink, #1a1a1a);
	line-height: 1;
}

.ppf-w__toggle {
	font-size: 16px;
	line-height: 1;
	color: var(--ppf-muted, #8a8378);
	font-weight: 300;
	transition: transform .25s ease;
}
.ppf-w__head[aria-expanded="false"] .ppf-w__toggle {
	transform: rotate(90deg);
}

/* Caso especial: o widget "Refinar" (sem accordion, só título) */
.ppf-w--refinar .ppf-w__title {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2);
	margin: 0 0 18px;
	display: block;
}

/* Lista de opções */
.ppf-w__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}
.ppf-w__list .ppf-row {
	margin: 0;
	padding: 0;
}

/* Linha de filtro (link clicável) */
.ppf-row__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--ppf-ink, #1a1a1a);
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	transition: opacity .15s ease, color .15s ease;
}
.ppf-row__link:hover {
	color: var(--ppf-ink, #1a1a1a);
	text-decoration: none;
}
.ppf-row__link:hover .ppf-row__label {
	opacity: 0.65;
}

.ppf-row__label {
	flex: 1;
	color: var(--ppf-ink, #1a1a1a);
	transition: opacity .15s ease;
}

/* Contagem em monoespaço, sutil */
.ppf-row__count {
	font-family: 'Courier New', monospace;
	font-size: 12px;
	color: var(--ppf-muted, #8a8378);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

/* Indentação de categorias filhas (hierarquia visual no widget Categoria) */
.ppf-row--depth-1 .ppf-row__link { padding-left: 18px; }
.ppf-row--depth-2 .ppf-row__link { padding-left: 32px; }
.ppf-row--depth-3 .ppf-row__link { padding-left: 46px; }

.ppf-row.is-child .ppf-row__label {
	color: var(--ppf-muted, #8a8378);
	font-size: 13px;
}

.ppf-row.is-child .ppf-row__link::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 50%;
	width: 8px;
	height: 1px;
	background: var(--ppf-line, #e6dfd2);
}
.ppf-row.is-child .ppf-row__link {
	position: relative;
}

/* Checkbox visual quadrada fina */
.ppf-checkbox {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid var(--ppf-muted, #8a8378);
	background: transparent;
	border-radius: 0;
	flex-shrink: 0;
	position: relative;
	transition: border-color .15s ease, background .15s ease;
}

.ppf-row.is-active .ppf-checkbox {
	background: var(--ppf-ink, #1a1a1a);
	border-color: var(--ppf-ink, #1a1a1a);
}
.ppf-row.is-active .ppf-checkbox::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 0;
	width: 5px;
	height: 9px;
	border: solid var(--ppf-bg, #f3efe6);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.ppf-row.is-active .ppf-row__label {
	font-weight: 500;
}

/* Estado "sem estoque" — visualmente desativado */
.ppf-row.is-empty {
	opacity: 0.4;
	pointer-events: none;
}
.ppf-row.is-empty .ppf-row__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ppf-muted, #8a8378);
}

/* ============================================================================
   3) FILTRO COR — SWATCHES CIRCULARES
   ========================================================================== */

.ppf-w--cor .ppf-row--swatch .ppf-row__link {
	gap: 14px;
	padding: 7px 0;
}

.ppf-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--swatch, #ccc);
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
	transition: transform .15s ease, box-shadow .15s ease;
}

.ppf-row--swatch:hover .ppf-swatch {
	transform: scale(1.08);
}

.ppf-row--swatch.is-active .ppf-swatch {
	box-shadow:
		inset 0 0 0 1px rgba(0,0,0,0.06),
		0 0 0 2px var(--ppf-bg, #f3efe6),
		0 0 0 3px var(--ppf-ink, #1a1a1a);
}

.ppf-row--swatch.is-active .ppf-row__label {
	font-weight: 500;
}

/* Cor branca/clara recebe borda visível */
.ppf-swatch[style*="#fafafa"],
.ppf-swatch[style*="#efe9dd"],
.ppf-swatch[style*="#ffffff"],
.ppf-swatch[style*="#fff"] {
	box-shadow: inset 0 0 0 1px var(--ppf-line, #e6dfd2);
}

/* ============================================================================
   4) FILTRO TAMANHO — PILLS
   ========================================================================== */

.ppf-w__list--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.ppf-w__list--pills .ppf-row--pill {
	margin: 0;
}

.ppf-w__list--pills .ppf-row--pill .ppf-row__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 14px;
	min-width: 44px;
	border: 1px solid var(--ppf-line, #e6dfd2);
	background: transparent;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ppf-ink, #1a1a1a);
	transition: all .15s ease;
}

.ppf-w__list--pills .ppf-row--pill .ppf-row__link:hover {
	border-color: var(--ppf-ink, #1a1a1a);
}

.ppf-w__list--pills .ppf-row--pill.is-active .ppf-row__link {
	background: var(--ppf-ink, #1a1a1a);
	border-color: var(--ppf-ink, #1a1a1a);
	color: var(--ppf-bg, #f3efe6);
}

.ppf-w__list--pills .ppf-row--pill.is-empty .ppf-row__link {
	border-style: dashed;
	color: var(--ppf-muted, #8a8378);
	text-decoration: line-through;
	background: transparent;
}

/* ============================================================================
   5) CHIPS DE FILTROS ATIVOS
   ========================================================================== */

.ppf-w__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ppf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 12px;
	background: var(--ppf-paper, #faf7f1);
	border: 1px solid var(--ppf-line, #e6dfd2);
	color: var(--ppf-ink, #1a1a1a);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: border-color .15s ease;
}

.ppf-chip:hover {
	border-color: var(--ppf-ink, #1a1a1a);
	text-decoration: none;
	color: var(--ppf-ink, #1a1a1a);
}

.ppf-chip__x {
	font-size: 14px;
	line-height: 1;
	color: var(--ppf-muted, #8a8378);
	font-weight: 300;
}

.ppf-chip:hover .ppf-chip__x {
	color: var(--ppf-accent, #5a1a2a);
}

.ppf-clear-all {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	margin-left: 4px;
	transition: color .15s ease;
}

.ppf-clear-all:hover {
	color: var(--ppf-accent, #5a1a2a);
	text-decoration-color: var(--ppf-accent, #5a1a2a);
}

/* ============================================================================
   6) SIDEBAR INTEGRAÇÃO FLATSOME
   ========================================================================== */

/* Ajustes finos quando o widget está dentro da sidebar Flatsome */
.shop-sidebar .ppf-w,
#shop-sidebar .ppf-w,
.sidebar-inner .ppf-w {
	margin-bottom: 36px;
}

.shop-sidebar .widget,
#shop-sidebar .widget {
	border: 0;
	background: transparent;
	padding: 0;
}

/* ============================================================================
   7) ACESSIBILIDADE
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ppf-row__link:focus { outline: 0; }
.ppf-row__link:focus-visible {
	outline: 2px solid var(--ppf-accent, #5a1a2a);
	outline-offset: 2px;
}

/* Animação suave de abertura/fechamento do accordion */
.ppf-w__list,
.ppf-w__chips {
	overflow: hidden;
	transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease;
}

.ppf-w[data-collapsed="true"] .ppf-w__list {
	max-height: 0 !important;
	margin-top: 0 !important;
	opacity: 0;
}

/* ============================================================================
   8) FILTRO MOBILE — BARRA LIMPA + DRAWER (off-canvas)
   --------------------------------------------------------------------------
   Substitui o botão "Filtrar" + ordenação soltos do Flatsome/Woo no mobile
   por uma barra moderna e um drawer que contém TODOS os filtros + ordenação.
   ========================================================================== */

/* Barra mobile — escondida no desktop. */
.ppf-mbar { display: none; }

/* Esconde controles nativos quando o drawer do plugin está ativo. */
.ppf-native-hidden { display: none !important; }

@media (max-width: 849px) {
	/* No mobile mostramos a barra e escondemos a toolbar editorial desktop. */
	body.ppf-mdrawer-on .ppf-toolbar { display: none !important; }

	.ppf-mbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		margin: 0 0 22px !important;
		padding: 12px 0;
		border-top: 1px solid var(--ppf-line, #e6dfd2);
		border-bottom: 1px solid var(--ppf-line, #e6dfd2);
		font-family: 'Inter', sans-serif;
		box-sizing: border-box;
	}

	.ppf-mbar__filter {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		background: transparent;
		border: 0;
		padding: 6px 2px;
		margin: 0;
		cursor: pointer;
		color: var(--ppf-ink, #1a1a1a);
		font-family: 'Inter', sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		line-height: 1;
		box-shadow: none;
	}
	.ppf-mbar__filter:focus-visible {
		outline: 2px solid var(--ppf-accent, #5a1a2a);
		outline-offset: 3px;
	}
	.ppf-mbar__icon { display: inline-flex; color: var(--ppf-ink, #1a1a1a); }
	.ppf-mbar__icon svg { display: block; }

	.ppf-mbar__count {
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--ppf-muted, #8a8378);
		font-variant-numeric: tabular-nums;
	}
	.ppf-mbar__count-num { color: var(--ppf-ink, #1a1a1a); margin-right: 2px; }
}

/* ---- Overlay + Drawer (sempre no DOM; visíveis só quando abertos) ---- */
.ppf-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 16, 0.42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
	z-index: 100000;
}
.ppf-drawer {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	height: 100dvh;
	width: min(88vw, 380px);
	background: var(--ppf-paper, #faf7f1);
	color: var(--ppf-ink, #1a1a1a);
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	z-index: 100001;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
	font-family: 'Inter', sans-serif;
	will-change: transform;
}
body.ppf-drawer-open { overflow: hidden; }
body.ppf-drawer-open .ppf-drawer { transform: translateX(0); }
body.ppf-drawer-open .ppf-drawer-overlay { opacity: 1; visibility: visible; }

.ppf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2);
	flex: 0 0 auto;
}
.ppf-drawer__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ppf-ink, #1a1a1a);
}
.ppf-drawer__close {
	background: transparent;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--ppf-muted, #8a8378);
	cursor: pointer;
	padding: 0 4px;
}
.ppf-drawer__close:hover { color: var(--ppf-ink, #1a1a1a); }

.ppf-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px 22px 8px;
}

/* Ordenação dentro do drawer */
.ppf-drawer__sort {
	margin: 0 0 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--ppf-line, #e6dfd2);
}
.ppf-drawer__sort-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
	margin: 0 0 10px;
}
.ppf-drawer__sort .ppf-orderby-form { display: block; position: relative; }
.ppf-orderby--drawer {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	background: var(--ppf-bg, #f3efe6);
	border: 1px solid var(--ppf-line, #e6dfd2);
	border-radius: 2px;
	padding: 12px 36px 12px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--ppf-ink, #1a1a1a);
	cursor: pointer;
	height: auto;
	line-height: 1.3;
}
.ppf-drawer__sort .ppf-orderby__chev {
	right: 14px;
	transform: translateY(-50%);
	top: 50%;
	font-size: 16px;
}

/* Filtros dentro do drawer — espaçamento consistente */
.ppf-drawer__filters .ppf-w { margin: 0 0 28px; }
.ppf-drawer__filters .ppf-w:last-child { margin-bottom: 8px; }

.ppf-drawer__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	border-top: 1px solid var(--ppf-line, #e6dfd2);
	background: var(--ppf-paper, #faf7f1);
}
.ppf-drawer__clear {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ppf-muted, #8a8378);
	text-decoration: none;
	white-space: nowrap;
}
.ppf-drawer__clear:hover { color: var(--ppf-ink, #1a1a1a); }
.ppf-drawer__apply {
	flex: 1 1 auto;
	background: var(--ppf-ink, #1a1a1a);
	color: var(--ppf-paper, #faf7f1);
	border: 0;
	border-radius: 2px;
	padding: 14px 18px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}
.ppf-drawer__apply:hover { background: var(--ppf-accent, #5a1a2a); }
.ppf-drawer__apply-num { margin: 0 3px; }

/* Garante que o drawer só fique "ativo" no mobile: no desktop, mesmo no DOM,
   fica fora de cena e os widgets vivem na sidebar. */
@media (min-width: 850px) {
	.ppf-drawer,
	.ppf-drawer-overlay { display: none !important; }
}

/* ----------------------------------------------------------------------------
   8b) Esconde os controles nativos do Flatsome no mobile (classes reais)
   --------------------------------------------------------------------------
   Flatsome renderiza o filtro mobile como:
     <div class="category-filtering category-filter-row show-for-medium">
       <a class="filter-button" data-open="#shop-sidebar">…Filtrar…</a>
     </div>
   e chama woocommerce_catalog_ordering() direto no template (.woocommerce-ordering),
   por isso o remove_action no PHP não o remove. Escondemos via CSS quando o
   drawer do plugin está presente/ativo. Gatilho duplo (classe no body + :has)
   para máxima robustez. .category-filtering já é show-for-medium (só mobile),
   então não há efeito no desktop.
   ------------------------------------------------------------------------- */
@media (max-width: 849px) {
	body.ppf-mdrawer-on .category-filtering,
	body.ppf-mdrawer-on .category-filter-row,
	body.ppf-mdrawer-on a.filter-button[data-open="#shop-sidebar"],
	body.ppf-mdrawer-on .shop-page-title .woocommerce-ordering,
	body.ppf-mdrawer-on .woocommerce-ordering,
	body:has(#ppf-drawer) .category-filtering,
	body:has(#ppf-drawer) .category-filter-row,
	body:has(#ppf-drawer) a.filter-button[data-open="#shop-sidebar"],
	body:has(#ppf-drawer) .shop-page-title .woocommerce-ordering,
	body:has(#ppf-drawer) .woocommerce-ordering {
		display: none !important;
	}
}