/* Kategorieseite „Alle Barf-Fleisch" – Breadcrumb, Filter, Produkt-Grid,
   Pagination und redaktionelle Blöcke.
   Vorlage: Design 1 (Figma 158:2053). Mobile zuerst: rund 80 % der
   Bestellungen kommen über das Handy. Produktkarte, USP-Zeile und FAQ
   kommen aus home.css (dieselben Design-1-Komponenten). */

.katalog {
	padding-bottom: var(--ffg-space-16);
}

/* ── Neukunden-Rabatt ───────────────────────────────────────────────────── */

.rabatt {
	display: flex;
	gap: var(--ffg-space-2) var(--ffg-space-4);
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: var(--ffg-space-4);
	padding: var(--ffg-space-3) var(--ffg-space-4);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	text-align: center;
	font-size: var(--ffg-size-sm);
}

.rabatt strong {
	color: var(--ffg-charcoal);
}

.rabatt code {
	padding: 0.25rem 0.5rem;
	border-radius: var(--ffg-radius);
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
	font-weight: 700;
}

/* ── Katalog-Kopf ───────────────────────────────────────────────────────── */

.katalog__head {
	margin-top: var(--ffg-space-8);
}

.katalog__intro {
	max-width: 44rem;
	margin-top: var(--ffg-space-3);
}

.katalog__toolbar {
	display: flex;
	gap: var(--ffg-space-3);
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--ffg-space-5);
}

.katalog__count {
	color: var(--ffg-text);
	font-size: var(--ffg-size-sm);
}

.katalog__tools {
	display: flex;
	gap: var(--ffg-space-3);
	align-items: center;
}

.katalog__sort {
	min-height: var(--ffg-tap);
	padding: 0 var(--ffg-space-3);
	border: 0.0625rem solid var(--ffg-border-strong);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
	color: var(--ffg-charcoal);
	font: inherit;
	font-size: var(--ffg-size-sm);
}

.katalog__views {
	display: none;
	gap: var(--ffg-space-1);
}

.katalog__views button {
	display: grid;
	place-items: center;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	border-radius: var(--ffg-radius);
	color: var(--ffg-text);
	background: none;
	font-size: 1.125rem;
}

.katalog__views button[aria-pressed="true"] {
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
}

@media (min-width: 62rem) {
	.katalog__views {
		display: flex;
	}
}

/* ── Layout: Filter + Grid ──────────────────────────────────────────────── */

.katalog__body {
	display: grid;
	gap: var(--ffg-space-6);
	margin-top: var(--ffg-space-5);
}

@media (min-width: 62rem) {
	.katalog__body {
		grid-template-columns: 15rem 1fr;
		align-items: start;
		gap: var(--ffg-space-8);
	}
}

/* ── Filter ─────────────────────────────────────────────────────────────── */

/* Mobil zugeklappt hinter einem Button, ab Desktop dauerhaft sichtbar.
   Aktive Filter stehen als Chips oben – man sieht sofort, warum das
   Ergebnis gefiltert ist. */

.filter {
	display: grid;
	gap: var(--ffg-space-4);
}

.filter__toggle {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--ffg-tap);
	padding: 0 var(--ffg-space-4);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 600;
}

.filter__toggle::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-right: 0.125rem solid var(--ffg-brown-logo);
	border-bottom: 0.125rem solid var(--ffg-brown-logo);
	transform: rotate(45deg) translate(-0.125rem, -0.125rem);
	transition: transform 0.2s ease;
}

.filter__toggle[aria-expanded="true"]::after {
	transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}

.filter__panel {
	display: none;
	padding: var(--ffg-space-5);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.filter__panel[data-open="true"] {
	display: grid;
	gap: var(--ffg-space-4);
}

@media (min-width: 62rem) {
	.filter__toggle {
		display: none;
	}

	.filter__panel {
		display: grid;
		gap: var(--ffg-space-4);
		position: sticky;
		top: var(--ffg-space-4);
	}
}

.filter__group h3 {
	margin: 0 0 var(--ffg-space-3);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-base);
	font-weight: 700;
}

.filter__group + .filter__group {
	padding-top: var(--ffg-space-4);
	border-top: 0.0625rem solid var(--ffg-border);
}

.filter__active {
	display: flex;
	gap: var(--ffg-space-2);
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.filter__chips {
	display: flex;
	gap: var(--ffg-space-2);
	flex-wrap: wrap;
}

.filter__chip {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	padding: 0.375rem 0.625rem;
	border-radius: 62.4375rem;
	background: var(--ffg-beige);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-xs);
	font-weight: 600;
}

.filter__chip button {
	display: grid;
	place-items: center;
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ffg-brown-logo);
	font-size: 0.875rem;
	line-height: 1;
}

.filter__clear {
	border: 0;
	background: none;
	padding: 0;
	color: var(--ffg-text);
	font-size: var(--ffg-size-xs);
	text-decoration: underline;
}

.filter__option {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 2rem;
	color: var(--ffg-text);
	font-size: var(--ffg-size-base);
}

.filter__option input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--ffg-brown-dark);
}

.filter__price {
	display: flex;
	gap: var(--ffg-space-2);
	align-items: center;
}

.filter__price input {
	width: 4.5rem;
	min-height: 2.25rem;
	padding: 0 0.5rem;
	border: 0.0625rem solid var(--ffg-border-strong);
	border-radius: var(--ffg-radius);
	font: inherit;
	font-size: var(--ffg-size-sm);
}

.filter__price .btn {
	min-height: 2.25rem;
	padding-inline: var(--ffg-space-3);
	font-size: var(--ffg-size-sm);
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.pagination {
	display: flex;
	gap: var(--ffg-space-2);
	justify-content: center;
	margin-top: var(--ffg-space-8);
}

.pagination a {
	display: grid;
	place-items: center;
	min-width: var(--ffg-tap);
	min-height: var(--ffg-tap);
	padding: 0 var(--ffg-space-2);
	border-radius: var(--ffg-radius);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
	color: var(--ffg-text);
	font-size: var(--ffg-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.pagination [aria-current] {
	background: var(--ffg-brown-dark);
	color: var(--ffg-white);
}

/* ── USP-Zeile: vier statt fünf Spalten ─────────────────────────────────── */

@media (min-width: 62rem) {
	.flexible--vier {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Redaktionelle Blöcke ───────────────────────────────────────────────── */

/* Der SEO-Text der Live-Seite bleibt erhalten, bekommt aber Flächen und
   Bilder statt einer Textwand am Seitenende. */

.editorial {
	display: grid;
	gap: var(--ffg-space-6);
	margin-top: var(--ffg-space-10);
}

.editorial img {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	object-fit: cover;
	border-radius: var(--ffg-radius-card);
}

.editorial__body h2 {
	margin: 0;
}

.editorial__body p {
	margin: var(--ffg-space-3) 0 0;
	max-width: 38rem;
}

.editorial__list {
	margin: var(--ffg-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.editorial__list li {
	display: flex;
	gap: 0.625rem;
	margin-top: var(--ffg-space-2);
	font-size: var(--ffg-size-base);
}

.editorial__list li::before {
	content: "✓";
	flex: 0 0 auto;
	color: var(--ffg-green);
	font-weight: 700;
}

.editorial__hint {
	margin: var(--ffg-space-3) 0 0;
	padding: var(--ffg-space-3) var(--ffg-space-4);
	border-radius: var(--ffg-radius);
	background: var(--ffg-pink);
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-sm);
}

@media (min-width: 62rem) {
	.editorial {
		grid-template-columns: 1fr 1fr;
		gap: var(--ffg-space-12);
		align-items: center;
	}

	.editorial--flip .editorial__media {
		order: -1;
	}
}