/* ==========================================================================
   Humimic Product Filter
   Desktop: inline sidebar panel.
   Mobile (<768px): slide-up bottom-sheet triggered by the "Filter" button.
   All rules scoped under plugin classes to avoid theme bleed.
   ========================================================================== */

:root {
	/* Humimic brand palette (Elementor global kit) */
	--hpf-violet: #9423FF;        /* Primary - Electric Violet */
	--hpf-violet-light: #B35FFF;  /* Secondary - Electric Violet (hover) */
	--hpf-violet-ink: #0E0617;    /* Primary - Dark Violet */
	--hpf-text: #454545;          /* brand Text */
	--hpf-muted: #B3B3B3;         /* Neutral Gray Text */
	--hpf-border: #ECE6F5;        /* soft violet-tinted border */
	--hpf-border-strong: #D0D0D0; /* brand Light Gray */
	--hpf-bg: #ffffff;
	--hpf-tint: #F6F1FF;          /* faint violet surface for selected/neutral */
	--hpf-pink: #FF25FB;          /* brand Magenta */
	--hpf-pink-tint: rgba(255, 37, 251, .10); /* soft pink hover background */
	--hpf-pink-tint-strong: rgba(255, 37, 251, .16);
	--hpf-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--hpf-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Scope brand font + smoothing to the filter UI. */
.hpf-filter,
.hpf-mobile-trigger {
	font-family: var(--hpf-font);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Mobile toolbar: Sort + Filter (hidden on desktop) ---------- */
.hpf-mobile-toolbar { display: none; }

/* Shared button look for both Sort and Filter triggers. */
.hpf-mobile-trigger,
.hpf-mobile-sort {
	display: none; /* shown via media query */
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 16px;
	border: 1.5px solid var(--hpf-border-strong) !important;
	border-radius: 10px !important;
	background: var(--hpf-bg) !important;
	background-image: none !important;
	box-shadow: none;
	color: var(--hpf-violet-ink) !important; /* brand near-black, not theme blue */
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .2s var(--hpf-ease), color .2s var(--hpf-ease), box-shadow .2s var(--hpf-ease), background-color .2s var(--hpf-ease);
}
.hpf-mobile-trigger:hover,
.hpf-mobile-sort:hover {
	border-color: var(--hpf-pink) !important;
	color: var(--hpf-pink) !important;
	background: var(--hpf-pink-tint) !important;
	box-shadow: 0 4px 14px rgba(255, 37, 251, .18);
}
.hpf-mobile-trigger:focus-visible,
.hpf-mobile-sort:focus-visible { outline: 2px solid var(--hpf-pink); outline-offset: 2px; }
.hpf-mobile-trigger:focus:not(:focus-visible),
.hpf-mobile-sort:focus:not(:focus-visible) { outline: none; }
.hpf-mobile-trigger svg,
.hpf-mobile-sort svg { transition: color .2s var(--hpf-ease); flex: 0 0 auto; }
.hpf-mobile-trigger .hpf-active-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--hpf-violet);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.hpf-mobile-trigger .hpf-active-badge[hidden] { display: none; }

/* ---------- Button reset ----------
   The theme/Elementor styles every <button>. Neutralize that for all controls
   inside the filter so brand styling isn't overridden by theme button skins.
   Specific rules below re-apply intended backgrounds (e.g. Apply button). */
.hpf-filter button,
.hpf-mobile-trigger {
	-webkit-appearance: none;
	appearance: none;
	text-shadow: none;
}
/* Strip theme backgrounds only from the link-style buttons; the Apply/Clear
   buttons keep their own intended backgrounds. */
.hpf-filter button:not(.hpf-btn-apply):not(.hpf-btn-clear) {
	background: transparent;
	background-image: none;
}

/* ---------- Overlay ---------- */
.hpf-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 9998;
}
.hpf-overlay.is-visible { opacity: 1; }

/* ---------- Panel (desktop sidebar) ---------- */
.hpf-filter {
	background: var(--hpf-bg);
	border: 1px solid var(--hpf-border);
	border-radius: 14px;
	color: var(--hpf-text);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.hpf-sheet-handle { display: none; }

.hpf-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--hpf-border);
}
.hpf-title {
	margin: 0;
	/* Lock typography so the theme's h2 styles can't override it. */
	font-family: var(--hpf-font) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	flex: 1;
	color: var(--hpf-violet) !important;
}
.hpf-clear-all {
	/* Force a borderless text-link look; override theme/Elementor button styles. */
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--hpf-violet) !important;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 4px 2px !important;
	min-width: 0;
	width: auto;
	border-radius: 0 !important;
	transition: color .18s var(--hpf-ease);
}
.hpf-clear-all:hover { color: var(--hpf-pink) !important; background: none !important; }
.hpf-clear-all:focus-visible { outline: 2px solid var(--hpf-pink); outline-offset: 2px; }
.hpf-clear-all:focus:not(:focus-visible) { outline: none; }
.hpf-close {
	display: none; /* desktop: no close button */
	/* Lock to a borderless icon button; theme button skins must not apply. */
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	font-size: 24px;
	line-height: 1;
	color: var(--hpf-muted) !important;
	cursor: pointer;
}
.hpf-close:hover { color: var(--hpf-pink) !important; }

/* ---------- Search ---------- */
.hpf-search {
	padding: 14px 18px 6px;
}
/* Inner field wraps icon + input. Icon is positioned relative to THIS box
   (which has no padding), so its offset is measured straight from the input
   edge — independent of the outer wrapper's padding. */
.hpf-search-field {
	position: relative;
	display: block;
}
/* Icon wrapper constrains the SVG to a fixed box so the theme's global
   `svg { width: 24px }` can't enlarge it. */
.hpf-search-icon {
	position: absolute;
	left: 16px;          /* from the input's left edge */
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--hpf-muted);
	z-index: 2;
	transition: color .2s var(--hpf-ease);
}
.hpf-search-icon svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	max-width: 16px;
	display: block;
	flex: none;
	/* Elementor injects `svg { fill: <color> }` globally, which overrides the
	   SVG's fill="none" attribute and turns this outline icon into a solid
	   blob. Force the outline look back. */
	fill: none !important;
}
.hpf-search-icon svg circle,
.hpf-search-icon svg path {
	fill: none !important;
	stroke: currentColor !important;
}
.hpf-search-input {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 11px 14px 11px 48px;
	/* Force the left gap independently so a theme `input{padding}` shorthand
	   can't shrink it: icon left(16) + size(16) + gap(16) = 48. */
	padding-left: 48px !important;
	border: 1.5px solid var(--hpf-border);
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--hpf-violet-ink);
	background: var(--hpf-bg);
	outline: none;
	box-sizing: border-box;
	transition: border-color .2s var(--hpf-ease), box-shadow .2s var(--hpf-ease);
}
.hpf-search-input::placeholder { color: var(--hpf-muted); opacity: 1; }
.hpf-search-input:focus {
	border-color: var(--hpf-violet);
	box-shadow: 0 0 0 3px rgba(148, 35, 255, .12);
}
.hpf-search-field:focus-within .hpf-search-icon { color: var(--hpf-violet); }
/* Hide the native search clear (X) so it can't collide with our layout. */
.hpf-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- Body / groups ---------- */
.hpf-body {
	padding: 8px 18px;
	overflow-y: auto;
	flex: 1;
}
.hpf-group { border-bottom: 1px solid var(--hpf-border); padding: 10px 0; }
.hpf-group:last-child { border-bottom: none; }

.hpf-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Neutralize theme/Elementor <button> styling that injects a colored bg. */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
	padding: 8px 10px;
	margin: 0 -10px;
	width: calc(100% + 20px);
	border-radius: 8px !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hpf-violet) !important;
	cursor: pointer;
	transition: color .18s var(--hpf-ease), background-color .18s var(--hpf-ease);
}
/* Pink fill only on actual mouse hover, so it never sticks after a click. */
.hpf-group-toggle:hover {
	color: var(--hpf-pink) !important;
	background: var(--hpf-pink-tint) !important;
}
.hpf-group-toggle:hover .hpf-chevron { color: var(--hpf-pink); }
/* Keyboard focus gets a ring, not a persistent fill. */
.hpf-group-toggle:focus-visible {
	outline: 2px solid var(--hpf-pink);
	outline-offset: 2px;
}
.hpf-group-toggle:focus:not(:focus-visible) { outline: none; }
.hpf-chevron { transition: transform .25s var(--hpf-ease), color .2s var(--hpf-ease); color: var(--hpf-violet); }
.hpf-group.is-collapsed .hpf-chevron { transform: rotate(-90deg); }
.hpf-group.is-collapsed .hpf-options { display: none; }

.hpf-options { list-style: none; margin: 6px 0 0; padding: 0; }
.hpf-option { margin: 0; }
.hpf-option.is-hidden { display: none; }

.hpf-check {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	margin: 1px -10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color .15s var(--hpf-ease);
}
.hpf-check:hover { background: var(--hpf-pink-tint); }
.hpf-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.hpf-checkbox {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--hpf-border-strong);
	border-radius: 5px;
	position: relative;
	transition: background-color .15s var(--hpf-ease), border-color .15s var(--hpf-ease), transform .15s var(--hpf-ease);
}
.hpf-check:hover .hpf-checkbox { border-color: var(--hpf-pink); }
.hpf-check input:checked + .hpf-checkbox {
	background: var(--hpf-violet);
	border-color: var(--hpf-violet);
}
.hpf-check:hover input:checked + .hpf-checkbox { background: var(--hpf-pink); border-color: var(--hpf-pink); }
.hpf-check input:checked + .hpf-checkbox::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.hpf-check input:active + .hpf-checkbox { transform: scale(.9); }
.hpf-check input:focus-visible + .hpf-checkbox {
	box-shadow: 0 0 0 3px rgba(148, 35, 255, .28);
}
.hpf-option-label {
	flex: 1;
	color: var(--hpf-violet-ink);
	transition: color .15s var(--hpf-ease);
}
/* Highlight the label of a selected row in brand violet. */
.hpf-check input:checked ~ .hpf-option-label { color: var(--hpf-violet); font-weight: 600; }
.hpf-count { color: var(--hpf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.hpf-option.is-empty { opacity: .42; }
.hpf-option.is-empty .hpf-check { cursor: default; }
.hpf-option.is-empty .hpf-check:hover { background: none; }

/* ---------- Footer ---------- */
.hpf-footer {
	display: flex;
	gap: 12px;
	padding: 14px 18px;
	border-top: 1px solid var(--hpf-border);
}
.hpf-btn {
	flex: 1;
	padding: 13px 16px;
	border-radius: 8px !important; /* matches brand button radius (6-8px) */
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-family: inherit;
	cursor: pointer;
	/* Lock the border so theme/Elementor button skins can't recolor it. */
	border: 1.5px solid var(--hpf-violet) !important;
	box-shadow: none;
	transition: background-color .2s var(--hpf-ease), color .2s var(--hpf-ease),
		border-color .2s var(--hpf-ease), box-shadow .2s var(--hpf-ease), transform .12s var(--hpf-ease);
}
.hpf-btn:active { transform: translateY(1px); }

.hpf-btn-clear {
	background: #fff !important;
	background-image: none !important;
	color: var(--hpf-violet) !important;
	border-color: var(--hpf-violet) !important;
}
.hpf-btn-clear:hover {
	background: var(--hpf-pink-tint) !important;
	border-color: var(--hpf-pink) !important;
	color: var(--hpf-pink) !important;
}
.hpf-btn-clear:focus-visible { outline: 2px solid var(--hpf-pink); outline-offset: 2px; }
.hpf-btn:focus:not(:focus-visible) { outline: none; }

.hpf-btn-apply {
	background: linear-gradient(135deg, var(--hpf-violet) 0%, var(--hpf-violet-light) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(148, 35, 255, .28);
}
.hpf-btn-apply:hover {
	background: linear-gradient(135deg, var(--hpf-violet-light) 0%, var(--hpf-violet) 100%) !important;
	color: #fff !important;
	box-shadow: 0 6px 20px rgba(148, 35, 255, .38);
}
.hpf-btn-apply:focus-visible { outline: 2px solid var(--hpf-violet-ink); outline-offset: 2px; }
.hpf-btn-apply:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* On desktop, "Apply" is optional (filters apply live); show as subtle. */
@media (min-width: 1025px) {
	.hpf-footer { padding-top: 12px; }
}

/* ========================================================================== */
/* MOBILE + TABLET BOTTOM-SHEET (<=1024px: phones and tablets)                  */
/* ========================================================================== */
@media (max-width: 1024px) {
	.hpf-mobile-toolbar {
		display: flex;
		gap: 10px;
		margin-bottom: 14px;
	}
	.hpf-mobile-trigger,
	.hpf-mobile-sort { display: inline-flex; }

	/* Desktop sort hidden on mobile (mobile uses the Sort sheet). */
	.hpf-desktop-sort { display: none !important; }

	.hpf-overlay:not([hidden]) { display: block; }

	.hpf-filter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 88vh;
		border-radius: 18px 18px 0 0;
		border: none;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
		transform: translateY(100%);
		transition: transform .3s cubic-bezier(.32, .72, 0, 1);
		z-index: 9999;
	}
	.hpf-filter.is-open { transform: translateY(0); }

	.hpf-sheet-handle {
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 999px;
		background: #d1d5db;
		margin: 10px auto 2px;
	}
	.hpf-close { display: block; }
	.hpf-body { max-height: 50vh; }

	.hpf-footer {
		position: sticky;
		bottom: 0;
		background: var(--hpf-bg);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .04);
	}
}

/* ========================================================================== */
/* DESKTOP SORT DROPDOWN                                                        */
/* ========================================================================== */
.hpf-desktop-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 4px;
}
.hpf-desktop-sort-label {
	font-family: var(--hpf-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--hpf-violet) !important;
	white-space: nowrap;
}
.hpf-select-wrap { position: relative; flex: 1; }
.hpf-desktop-sort-select {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	padding: 9px 34px 9px 12px;
	border: 1.5px solid var(--hpf-border-strong) !important;
	border-radius: 8px !important;
	background: var(--hpf-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--hpf-violet-ink) !important;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s var(--hpf-ease), box-shadow .2s var(--hpf-ease);
}
.hpf-desktop-sort-select:hover { border-color: var(--hpf-pink) !important; }
.hpf-desktop-sort-select:focus {
	outline: none;
	border-color: var(--hpf-violet) !important;
	box-shadow: 0 0 0 3px rgba(148, 35, 255, .12) !important;
}
.hpf-select-chevron {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hpf-violet);
	pointer-events: none;
}

/* ========================================================================== */
/* SORT BOTTOM-SHEET (mobile)                                                   */
/* ========================================================================== */
.hpf-sort-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity .25s ease;
	z-index: 9998;
}
.hpf-sort-overlay.is-visible { opacity: 1; }

.hpf-sort-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--hpf-bg);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	z-index: 9999;
	font-family: var(--hpf-font);
	max-height: 80vh;
	overflow-y: auto;
}
.hpf-sort-sheet.is-open { transform: translateY(0); }
.hpf-sort-sheet .hpf-sheet-handle {
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: #d1d5db;
	margin: 10px auto 2px;
}
.hpf-sort-sheet .hpf-header { border-bottom: 1px solid var(--hpf-border); }
.hpf-sort-sheet .hpf-title { color: var(--hpf-violet) !important; flex: 1; }
.hpf-sort-close {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	font-size: 24px;
	line-height: 1;
	color: var(--hpf-muted) !important;
	cursor: pointer;
}
.hpf-sort-close:hover { color: var(--hpf-pink) !important; }

.hpf-sort-list { list-style: none; margin: 0; padding: 6px 0 14px; }
.hpf-sort-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 18px;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-family: inherit;
	font-size: 15px;
	color: var(--hpf-violet-ink) !important;
	cursor: pointer;
	transition: background-color .15s var(--hpf-ease), color .15s var(--hpf-ease);
}
.hpf-sort-option:hover { background: var(--hpf-pink-tint) !important; color: var(--hpf-pink) !important; }
.hpf-sort-option.is-active { color: var(--hpf-violet) !important; font-weight: 700; }
.hpf-sort-check { color: var(--hpf-violet); opacity: 0; transition: opacity .15s var(--hpf-ease); }
.hpf-sort-option.is-active .hpf-sort-check { opacity: 1; }

/* Loading state on the grid: dim + spinner overlay during AJAX. */
.hpf-grid-loading {
	position: relative;
	pointer-events: none;
	min-height: 200px;
}
.hpf-grid-loading > * {
	opacity: .35;
	transition: opacity .2s ease;
}
.hpf-grid-loading::after {
	content: "";
	position: absolute;
	top: 80px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border: 3px solid rgba(148, 35, 255, .2);
	border-top-color: var(--hpf-violet);
	border-radius: 50%;
	animation: hpf-spin .7s linear infinite;
	z-index: 5;
}
@keyframes hpf-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Custom scrollbar (brand-tinted) ---------- */
.hpf-body { scrollbar-width: thin; scrollbar-color: var(--hpf-violet-light) transparent; }
.hpf-body::-webkit-scrollbar { width: 7px; }
.hpf-body::-webkit-scrollbar-thumb {
	background: var(--hpf-border-strong);
	border-radius: 999px;
}
.hpf-body::-webkit-scrollbar-thumb:hover { background: var(--hpf-pink); }

/* ---------- Brand-aligned pagination inside the filtered grid ---------- */
.elementor-widget-loop-grid .elementor-pagination .page-numbers {
	transition: color .18s var(--hpf-ease), background-color .18s var(--hpf-ease), border-color .18s var(--hpf-ease);
}
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover {
	color: var(--hpf-violet-light);
}
.elementor-widget-loop-grid .elementor-pagination .page-numbers.current {
	color: var(--hpf-violet);
	font-weight: 700;
}