/**
 * Kategorie-Filterleiste für Shop- und Kategorie-Seiten.
 *
 * Farben kommen aus Blocksys Palette (--theme-palette-color-*), damit
 * Änderungen im Customizer automatisch übernommen werden. Die Fallbacks
 * entsprechen der aktuellen Palette.
 */

.holland-shop-filter {
	--hsf-surface: var(--theme-palette-color-6, #f4f5f6);
	--hsf-border: var(--theme-palette-color-5, #e9ebec);
	--hsf-text: var(--theme-palette-color-4, #111518);
	--hsf-muted: var(--theme-palette-color-3, #687279);
	--hsf-accent: var(--theme-palette-color-1, #ff6310);
	--hsf-on-accent: var(--theme-palette-color-8, #ffffff);
	--hsf-pill-bg: var(--theme-palette-color-7, #ffffff);

	position: relative;
	background: var(--hsf-surface);
	border-radius: 18px;
	padding: 22px 24px;
	margin-bottom: 35px;
	width: 100%;
}

.holland-shop-filter__label {
	display: block;
	font-size: 15px;
	line-height: 1.3;
	color: var(--hsf-muted);
	margin-bottom: 14px;
}

.holland-shop-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.holland-shop-filter__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.holland-shop-filter__list li::before,
.holland-shop-filter__list li::marker {
	content: none;
}

.holland-shop-filter__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 1px solid var(--hsf-border);
	border-radius: 999px;
	background: var(--hsf-pill-bg);
	color: var(--hsf-text);
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.holland-shop-filter__pill:hover,
.holland-shop-filter__pill:focus-visible {
	border-color: var(--hsf-accent);
	color: var(--hsf-accent);
	text-decoration: none;
}

.holland-shop-filter__pill:focus-visible {
	outline: 2px solid var(--hsf-accent);
	outline-offset: 2px;
}

.holland-shop-filter__pill.is-active,
.holland-shop-filter__pill.is-active:hover,
.holland-shop-filter__pill.is-active:focus-visible {
	background: var(--hsf-accent);
	border-color: var(--hsf-accent);
	color: var(--hsf-on-accent);
}

/* --- "..." mit Untermenü ------------------------------------------------ */

/*
 * Bewusst ohne JavaScript: :hover öffnet am Desktop, :focus-within sorgt
 * dafür, dass Tastatur und Touch (Tap auf den Button setzt den Fokus)
 * genauso funktionieren.
 */

.holland-shop-filter__more {
	position: relative;
}

.holland-shop-filter__pill--more {
	font-family: inherit;
	cursor: pointer;
	letter-spacing: 0.08em;
	padding-left: 18px;
	padding-right: 18px;
}

/*
 * Das Untermenü ist eine senkrechte Liste unterhalb der Pill-Reihe. Der
 * "..."-Button ist immer das letzte Element der Liste und damit in der
 * letzten Zeile - darunter kann das Menü nichts verdecken.
 *
 * Ausgerichtet ist es rechtsbündig am Button.
 */

.holland-shop-filter__submenu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	z-index: 20;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;

	min-width: 190px;
	max-width: calc(100vw - 48px);

	/* Bei vielen Einträgen scrollen statt das Panel zu sprengen. */
	max-height: 60vh;
	overflow-y: auto;

	margin: 0;
	padding: 8px;
	list-style: none;

	background: var(--hsf-pill-bg, #fff);
	border: 1px solid var(--hsf-border);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.holland-shop-filter__more:hover .holland-shop-filter__submenu,
.holland-shop-filter__more:focus-within .holland-shop-filter__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Überbrückt die Lücke zwischen Button und Menü, damit es beim
   Hinüberfahren nicht zuklappt. */
.holland-shop-filter__more::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 12px;
}

.holland-shop-filter__submenu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.holland-shop-filter__submenu li::before,
.holland-shop-filter__submenu li::marker {
	content: none;
}

.holland-shop-filter__subitem {
	display: block;
	padding: 10px 14px;
	border-radius: 9px;
	color: var(--hsf-text);
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.holland-shop-filter__subitem:hover,
.holland-shop-filter__subitem:focus-visible {
	background: var(--hsf-surface);
	color: var(--hsf-accent);
	text-decoration: none;
}

.holland-shop-filter__subitem.is-active {
	background: var(--hsf-accent);
	color: var(--hsf-on-accent);
}

/* --- Mobil -------------------------------------------------------------- */

/*
 * Hier bewusst kein waagerechtes Scrollen: ein overflow-x-Container würde
 * das ausgeklappte Untermenü abschneiden. Bei acht Pills plus "..." bricht
 * die Reihe ohnehin sauber um.
 */

@media (max-width: 689px) {
	.holland-shop-filter {
		padding: 18px 16px;
		border-radius: 14px;
	}

	.holland-shop-filter__list {
		gap: 8px;
	}

	.holland-shop-filter__pill {
		padding: 9px 16px;
		font-size: 14px;
	}

	/*
	 * Auf schmalen Bildschirmen nimmt das Untermenü die volle Panelbreite
	 * ein und läuft in normaler Leserichtung. Bezug ist deshalb das Panel
	 * (position: relative), nicht der Button - so kann es nicht über den
	 * rechten Rand hinauslaufen.
	 */
	.holland-shop-filter__more {
		position: static;
	}

	.holland-shop-filter__submenu {
		top: calc(100% + 8px);
		right: 0;
		left: 0;
		min-width: 0;
		max-width: none;
	}

	.holland-shop-filter__subitem {
		font-size: 14px;
		white-space: normal;
	}
}

/*
 * Kein prefers-color-scheme-Block hier: der Shop läuft mit Blocksys fester
 * heller Palette. Ein dunkles Schema würde nur die Filterleiste umfärben,
 * während der Rest der Seite hell bleibt.
 */