body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
.menu-open { overflow: hidden; } /* Trava o scroll quando menu abrir */

/* Filtros modernos */
.filters-bar::-webkit-scrollbar { height: 8px; }
.filters-bar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 999px; }

.filter-pill { display: inline-block; }
.filter-select {
	background: rgb(65 65 65 / 80%);
	border: 1px solid rgba(15,23,42,0.06);
	border-radius: 12px;
	padding: 0.5rem 0.75rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.filter-select:focus {
	outline: none;
	box-shadow: 0 4px 14px rgba(15,23,42,0.06);
	transform: translateY(-1px);
}
/* Desktop (>=768px): horizontal layout */
@media (min-width: 768px) {
    .filters-row { display: flex; flex-direction: row; align-items: center; gap: 1rem; }
    .filters-bar { display: flex; gap: 1rem; align-items: center; overflow-x: auto; padding: 0; margin: 0; }
    .filter-pill { width: auto; min-width: 140px; }
    .filter-pill label { display: block; font-size: 11px; margin-bottom: 0.35rem; color: #64748b; letter-spacing: 0.06em; }
    .filter-select { width: 180px; border-radius: 10px; padding: 0.5rem 0.75rem; }
    #clear-filters { width: auto; margin-top: 0; margin-left: auto; }
}

/* Mobile (<=640px): two-column grid */
@media (max-width: 640px) {
    .filters-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .filters-bar { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .filter-pill { min-width: auto; width: 100%; }
    .filter-pill label { display: block; font-size: 10px; margin-bottom: 0.25rem; color: #64748b; letter-spacing: 0.06em; }
    .filter-select { width: 100%; border-radius: 10px; padding: 0.55rem 0.75rem; }
    #clear-filters { width: 100% !important; margin-top: 0.25rem; text-align: center; padding: 0.6rem; border-radius: 10px; border: none; }
}

/* Prominent clear button (desktop + mobile) */
#clear-filters {
    background: #f3c100;
    color: #2e2e2e;
    font-weight: 600;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
#clear-filters:hover { background: #a07b02; }
#clear-filters:focus { outline: 3px solid rgba(17,24,39,0.12); outline-offset: 2px; }