/**
 * Masterflo Product Filter — base styles.
 * Defaults match the Masterflo design spec ("Browse by type" chips);
 * everything is overridable from the widget's Style tab.
 */

.mfw-filter,
.mfw-filter * {
	box-sizing: border-box;
}

.mfw-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: var(--mfw-filter-align, flex-start);
}

/* Two-class selector (0,2,0) so it outranks
   themes that style every button on hover/focus (hello-elementor's reset
   paints `button:hover,button:focus` #c36), while still deferring to the
   Style tab, whose CSS loads later. */
.mfw-filter .mfw-filter__chip {
	padding: 8px 15px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid #e4e7ec;
	background-color: #fff;
	color: #5a6b84;
	transition: all 0.16s ease;
}

.mfw-filter .mfw-filter__chip:hover,
.mfw-filter .mfw-filter__chip:focus {
	background-color: #fff;
	color: #071630;
	border-color: #c4ccd8;
}

.mfw-filter .mfw-filter__chip:focus-visible {
	outline: 2px solid #26408f;
	outline-offset: 2px;
}

.mfw-filter .mfw-filter__chip.is-active,
.mfw-filter .mfw-filter__chip.is-active:hover,
.mfw-filter .mfw-filter__chip.is-active:focus {
	background-color: #071630;
	border-color: #071630;
	color: #fff;
}

/* Applied by product-filter.js to the card's widget wrapper */
.mfw-card-hidden {
	display: none !important;
}

.mfw-card-appear {
	animation: mfwCardIn 0.28s ease both;
}

@keyframes mfwCardIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}