.lupi-brands-filter-grid {
	--lupi-bfg-gap: 1rem;
	--lupi-bfg-header-gap: 0.75rem;
	--lupi-bfg-pill-gap: 0.5rem;
	--lupi-bfg-pill-pad-y: 0.5rem;
	--lupi-bfg-pill-pad-x: 0.75rem;
	--lupi-bfg-grid-gap: 1rem;
	--lupi-bfg-grid-padding: 0.75rem;
	--lupi-bfg-tile-min-height: 6rem;
	--lupi-bfg-logo-max-height: 2.5rem;
	--lupi-bfg-radius: 0.75rem;
	--lupi-bfg-border: #e6e8eb;
	--lupi-bfg-border-hover: #cfd4da;
	--lupi-bfg-bg-pill: #f1f2f4;
	--lupi-bfg-bg-pill-active: #111;
	--lupi-bfg-color-pill: #111;
	--lupi-bfg-color-pill-active: #fff;
	--lupi-bfg-color-muted: #646b73;
	--lupi-bfg-max-height: 22.50rem;
	--lupi-bfg-columns-desktop: 7;
	--lupi-bfg-columns-tablet: 4;
	--lupi-bfg-columns-mobile: 2;
	--lupi-bfg-fade-height: 3.5rem;
	width: 100%;
	display: grid;
	gap: var(--lupi-bfg-gap);
}

.lupi-brands-filter-grid__wrapper,
.lupi-brands-filter-grid__inner {
	width: 100%;
}

.lupi-brands-filter-grid__inner {
	display: grid;
	gap: var(--lupi-bfg-gap);
}

.lupi-brands-filter-grid__header {
	display: grid;
	gap: var(--lupi-bfg-header-gap);
}

.lupi-brands-filter-grid__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
}

.lupi-brands-filter-grid__filter {
	width: 100%;
}

.lupi-brands-filter-grid__pills {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--lupi-bfg-pill-gap);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.lupi-brands-filter-grid__legend {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lupi-brands-filter-grid__pill {
	appearance: none;
	border: 0;
	border-radius: 999rem;
	padding: var(--lupi-bfg-pill-pad-y) var(--lupi-bfg-pill-pad-x);
	background: var(--lupi-bfg-bg-pill);
	color: var(--lupi-bfg-color-pill);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.lupi-brands-filter-grid__pill[aria-pressed="true"] {
	background: var(--lupi-bfg-bg-pill-active);
	color: var(--lupi-bfg-color-pill-active);
}

.lupi-brands-filter-grid__pill--is-disabled,
.lupi-brands-filter-grid__pill:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.lupi-brands-filter-grid__pill:focus-visible {
	outline: 0.125rem solid #111;
	outline-offset: 0.125rem;
}

.lupi-brands-filter-grid__grid-wrap {
	position: relative;
	width: 100%;
	max-height: var(--lupi-bfg-max-height);
	overflow: auto;
	border-radius: var(--lupi-bfg-radius);
	border: 0.0625rem solid var(--lupi-bfg-border);
}

.lupi-brands-filter-grid__grid-wrap:focus-visible {
	outline: 0.125rem solid #111;
	outline-offset: 0.125rem;
}

.lupi-brands-filter-grid__grid {
	list-style: none;
	margin: 0;
	padding: var(--lupi-bfg-grid-padding);
	display: grid;
	grid-template-columns: repeat(var(--lupi-bfg-columns-desktop), minmax(0, 1fr));
	gap: var(--lupi-bfg-grid-gap);
}

@media (max-width: 64rem) {
	.lupi-brands-filter-grid__grid {
		grid-template-columns: repeat(var(--lupi-bfg-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.lupi-brands-filter-grid__grid {
		grid-template-columns: repeat(var(--lupi-bfg-columns-mobile), minmax(0, 1fr));
	}
}

.lupi-brands-filter-grid__item[hidden] {
	display: none;
}

.lupi-brands-filter-grid__tile {
	display: grid;
	place-items: center;
	min-height: var(--lupi-bfg-tile-min-height);
	padding: 1rem;
	background: #fff;
	border-radius: var(--lupi-bfg-radius);
	border: 0.0625rem solid var(--lupi-bfg-border);
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.lupi-brands-filter-grid__tile:hover {
	border-color: var(--lupi-bfg-border-hover);
}

.lupi-brands-filter-grid__tile:focus-visible {
	outline: 0.125rem solid #111;
	outline-offset: 0.125rem;
}

.lupi-brands-filter-grid__logo {
	max-width: 100%;
	max-height: var(--lupi-bfg-logo-max-height);
	width: auto;
	height: auto;
	object-fit: contain;
}

.lupi-brands-filter-grid__empty-message {
	margin: 0;
	padding: 0 var(--lupi-bfg-grid-padding) var(--lupi-bfg-grid-padding);
	color: var(--lupi-bfg-color-muted);
	font-size: 0.9375rem;
}

.lupi-brands-filter-grid__fade {
	position: sticky;
	left: 0;
	bottom: 0;
	height: var(--lupi-bfg-fade-height);
	width: 100%;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}