/*
 * bagstage Shop: Karten, Produktseite, Kollektionen, Warenkorb-Fuß, Checkout-Hinweise.
 * Farben aus theme.json (brand, ink, white, neutral, pille, linie), mit Rückfallwerten.
 * Pink nur als Akzent (FULL SET, Haken im Warenkorb, aktive Filterzahl). Alles rund, keine Schatten außer
 * einem leichten am Sortiermenü. Bewegung 200 ms, nur Deckkraft.
 */

:root {
	--bsp-brand: var(--wp--preset--color--brand, #ed3a8c);
	--bsp-ink: var(--wp--preset--color--ink, #000);
	--bsp-weiss: var(--wp--preset--color--white, #fff);
	--bsp-grau: var(--wp--preset--color--neutral, #f7f7f7);
	--bsp-pille: var(--wp--preset--color--pille, #6b6662);
	--bsp-linie: var(--wp--preset--color--linie, rgba(0, 0, 0, 0.15));
	--bsp-ink-80: rgba(0, 0, 0, 0.8);
	--bsp-ink-70: rgba(0, 0, 0, 0.7);
	--bsp-ink-60: rgba(0, 0, 0, 0.6);
	--bsp-ink-50: rgba(0, 0, 0, 0.5);
	--bsp-ink-40: rgba(0, 0, 0, 0.4);
	--bsp-dauer: 200ms;
	--bsp-karte-format: 2 / 3;
	--bsp-rand: var(--bs-gutter, 1rem);
}

@media (min-width: 640px) {
	:root {
		--bsp-rand: var(--bs-gutter, 2rem);
	}
}

/* ---------- Grundbausteine ---------- */

.bsp-symbol {
	display: block;
	flex-shrink: 0;
}

.bsp-rund {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--bsp-ink-70);
	cursor: pointer;
	transition: background-color var(--bsp-dauer), opacity var(--bsp-dauer), color var(--bsp-dauer);
}

.bsp-rund:hover {
	background: var(--bsp-weiss);
}

.bsp-rund:focus-visible,
.bsp-pille:focus-visible,
.bsp-chip:focus-visible,
.bsp-leiste__knopf:focus-visible,
.bsp-reiter__knopf:focus-visible,
.bsp-galerie__bild:focus-visible,
.bsp-karte__link:focus-visible {
	outline: 2px solid var(--bsp-ink);
	outline-offset: 2px;
}

.bsp-herz[aria-pressed="true"],
.bsp-herz.ist-gemerkt {
	color: var(--bsp-brand);
}

.bsp-herz[aria-pressed="true"] .bsp-symbol path,
.bsp-herz.ist-gemerkt .bsp-symbol path {
	fill: currentColor;
}

.bsp-herz--rahmen {
	border: 1px solid var(--bsp-linie);
}

.bsp-pille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: var(--bsp-pille);
	color: var(--bsp-weiss);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--bsp-dauer);
}

.bsp-pille:hover {
	opacity: 0.8;
	color: var(--bsp-weiss);
}

.bsp-pille--breit {
	display: flex;
	width: 100%;
	padding-block: 1rem;
}

.bsp-pille--hell,
.bsp-pille--hell:hover {
	background: var(--bsp-weiss);
	color: var(--bsp-ink);
}

.bsp-pille--hell:hover {
	opacity: 0.7;
}

.bsp-pille--aus,
.bsp-pille--aus:hover {
	background: rgba(255, 255, 255, 0.6);
	color: var(--bsp-ink-40);
	cursor: not-allowed;
	opacity: 1;
}

.bsp-pille[hidden],
.bsp-kaufen [hidden] {
	display: none;
}

/* ---------- Labels (NEU, FULL SET, VINTAGE, SOLD OUT) ---------- */

.bsp-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.bsp-label {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 0 0.75rem;
	border-radius: 9999px;
	color: var(--bsp-weiss);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsp-label--grau {
	background: var(--bsp-pille);
}

.bsp-label--pink {
	background: var(--bsp-brand);
}

.bsp-label--dunkel {
	background: var(--bsp-ink);
}

/* ---------- Karte ---------- */

.bsp-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.bsp-raster {
		gap: 1rem;
	}
}

@media (min-width: 768px) {
	.bsp-raster--3,
	.bsp-raster--4,
	.bsp-raster--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bsp-raster--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bsp-raster--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.bsp-raster [data-bsp-versteckt] {
	display: none;
}

.bsp-karte {
	position: relative;
	height: 100%;
	min-width: 0;
}

.bsp-karte__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--bsp-grau);
	color: var(--bsp-ink);
	text-align: left;
	text-decoration: none;
	transition: opacity var(--bsp-dauer);
}

.bsp-karte--auf-grau .bsp-karte__link {
	background: var(--bsp-weiss);
}

.bsp-karte__link:hover {
	opacity: 0.9;
	color: var(--bsp-ink);
}

.bsp-karte__bild {
	position: relative;
	aspect-ratio: var(--bsp-karte-format);
	overflow: hidden;
	border-radius: 1rem;
}

.bsp-karte__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Weißer Fotohintergrund nimmt die Kartenfarbe an (wie bagstage-main). */
	mix-blend-mode: multiply;
	transition: opacity var(--bsp-dauer);
}

.bsp-karte__bild-2 {
	opacity: 0;
}

@media (hover: hover) {
	.bsp-karte--zwei-bilder:hover .bsp-karte__bild-1 {
		opacity: 0;
	}

	.bsp-karte--zwei-bilder:hover .bsp-karte__bild-2 {
		opacity: 1;
	}
}

.bsp-karte__labels {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	justify-content: flex-end;
	max-width: 75%;
}

.bsp-karte__text {
	display: block;
	margin-top: auto;
	padding: 0.75rem 0.75rem 1rem;
}

@media (min-width: 640px) {
	.bsp-karte__text {
		padding-inline: 1rem;
	}
}

.bsp-karte__marke {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.bsp-karte__zeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.bsp-karte__name {
	min-width: 0;
	margin: 0;
	color: var(--bsp-ink-80);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 0;
	text-transform: none;
}

.bsp-karte__preis {
	flex-shrink: 0;
	font-size: 0.75rem;
	white-space: nowrap;
}

/* „Heute live auf Whatnot“ / „Reserviert“ darf umbrechen. */
.bsp-karte__preis--status {
	flex-shrink: 1;
	max-width: 50%;
	text-align: right;
	white-space: normal;
}

.bsp-karte__aktionen {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bsp-karte__korb {
	opacity: 0;
}

.bsp-karte:hover .bsp-karte__korb,
.bsp-karte__korb:focus-visible,
.bsp-karte__korb[aria-pressed="true"] {
	opacity: 1;
}

@media (hover: none) {
	.bsp-karte__korb {
		opacity: 1;
	}
}

.bsp-karte__korb[aria-pressed="true"] {
	color: var(--bsp-brand);
}

.bsp-karte__haken {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 9999px;
	background: var(--bsp-brand);
	color: var(--bsp-weiss);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bsp-dauer);
}

.bsp-karte__haken .bsp-symbol {
	stroke-width: 3;
}

.bsp-karte__korb[aria-pressed="true"] .bsp-karte__haken {
	opacity: 1;
}

.bsp-karte__korb.ist-beschaeftigt {
	opacity: 0.5;
	pointer-events: none;
}

.bsp-leer {
	padding: 2rem 0.25rem;
	text-align: left;
}

.bsp-leer p {
	margin: 0 0 1.5rem;
	color: var(--bsp-ink-70);
	font-size: 0.906rem;
}

/* ---------- Kollektion ---------- */

.bsp-kollektion {
	padding: 2rem var(--bsp-rand);
	border-radius: 1rem;
	background: var(--bsp-grau);
	color: var(--bsp-ink);
}

@media (min-width: 640px) {
	.bsp-kollektion {
		padding-block: 2.5rem;
	}
}

.bsp-kollektion__kopf {
	padding-inline: 0.25rem;
}

.bsp-kollektion__titel {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

@media (min-width: 640px) {
	.bsp-kollektion__titel {
		font-size: 1.875rem;
	}
}

.bsp-kollektion__text {
	max-width: 42rem;
	margin: 1rem 0 0;
	color: var(--bsp-ink-80);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.bsp-kollektion__raster {
	margin-top: 1.5rem;
}

.bsp-leiste {
	margin-top: 1.5rem;
}

.bsp-leiste__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.25rem;
}

.bsp-leiste__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bsp-ink);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.bsp-leiste__knopf .bsp-symbol--runter {
	transition: transform var(--bsp-dauer);
}

.bsp-leiste__knopf[aria-expanded="true"] .bsp-symbol--runter {
	transform: rotate(180deg);
}

.bsp-leiste__zahl {
	padding: 0.1rem 0.4rem;
	border-radius: 9999px;
	background: var(--bsp-brand);
	color: var(--bsp-weiss);
	font-size: 11.5px;
	line-height: 1.3;
}

.bsp-leiste__treffer {
	display: none;
	color: var(--bsp-ink-60);
	font-size: 0.75rem;
}

@media (min-width: 640px) {
	.bsp-leiste__treffer {
		display: inline;
	}
}

.bsp-sort {
	position: relative;
}

.bsp-sort__liste {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	width: 16rem;
	margin: 0.75rem 0 0;
	padding: 0.5rem;
	border-radius: 1rem;
	background: var(--bsp-weiss);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	list-style: none;
}

.bsp-sort__liste[hidden] {
	display: none;
}

.bsp-sort__option {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.75rem;
	color: var(--bsp-ink);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color var(--bsp-dauer);
}

.bsp-sort__option:hover {
	background: var(--bsp-grau);
	color: var(--bsp-ink);
}

.bsp-sort__option.ist-aktiv {
	font-weight: 700;
}

.bsp-filter {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0.5rem 0.25rem 1.25rem;
}

.bsp-filter[hidden] {
	display: none;
}

.bsp-filter__gruppe {
	margin: 0;
	padding: 0;
	border: 0;
}

.bsp-filter__gruppe legend {
	padding: 0;
	color: var(--bsp-ink-60);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsp-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.bsp-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 9999px;
	background: var(--bsp-weiss);
	color: var(--bsp-ink);
	font-size: 0.75rem;
	text-decoration: none;
	transition: border-color var(--bsp-dauer), background-color var(--bsp-dauer);
}

.bsp-chip:hover {
	border-color: rgba(0, 0, 0, 0.5);
	color: var(--bsp-ink);
}

.bsp-chip.ist-aktiv,
.bsp-chip.ist-aktiv:hover {
	border-color: var(--bsp-pille);
	background: var(--bsp-pille);
	color: var(--bsp-weiss);
}

.bsp-chip__zahl {
	margin-left: 0.25rem;
	color: var(--bsp-ink-40);
}

.bsp-chip.ist-aktiv .bsp-chip__zahl {
	color: rgba(255, 255, 255, 0.7);
}

.bsp-chip__punkt {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	margin-right: 0.375rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 9999px;
}

.bsp-filter__verfuegbar {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--bsp-ink);
	font-size: 0.875rem;
	text-decoration: none;
}

.bsp-filter__kasten {
	width: 1rem;
	height: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 0.25rem;
	background: var(--bsp-weiss);
}

.bsp-filter__verfuegbar[aria-checked="true"] .bsp-filter__kasten {
	border-color: var(--bsp-pille);
	background: var(--bsp-pille);
	box-shadow: inset 0 0 0 3px var(--bsp-weiss);
}

.bsp-filter__reset {
	align-self: flex-start;
	color: var(--bsp-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

/* ---------- Produktseite ---------- */

/* Außenabstand kommt von der Vorlage (.bs-haupt des Themes). */
.bsp-produkt {
	color: var(--bsp-ink);
}

@media (min-width: 1024px) {
	.bsp-produkt {
		display: flex;
		align-items: flex-start;
		gap: 2.5rem;
	}

	.bsp-produkt__galerie {
		width: 58%;
	}

	/* Die Infospalte bleibt im Blick; ist sie höher als der Bildschirm, scrollt sie unter der Maus selbst. */
	.bsp-produkt__spalte {
		position: sticky;
		top: 6rem;
		width: 42%;
		max-height: calc(100dvh - 7rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 1rem;
		scrollbar-width: thin;
	}
}

.bsp-galerie {
	display: flex;
	gap: 0.75rem;
	margin-inline: calc(var(--bsp-rand) * -1);
	padding-inline: var(--bsp-rand);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bsp-galerie::-webkit-scrollbar {
	display: none;
}

.bsp-galerie__bild {
	position: relative;
	flex-shrink: 0;
	width: 85%;
	aspect-ratio: 2 / 3;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 1rem;
	background: var(--bsp-grau);
	cursor: zoom-in;
	scroll-snap-align: start;
}

.bsp-galerie__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 640px) {
	.bsp-galerie {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.bsp-galerie__bild {
		width: auto;
	}

	.bsp-galerie__bild.ist-erstes {
		grid-column: span 2;
	}
}

.bsp-produkt__spalte {
	margin-top: 1.5rem;
}

@media (min-width: 1024px) {
	.bsp-produkt__spalte {
		margin-top: 0;
	}
}

.bsp-infokasten {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background: var(--bsp-grau);
}

@media (min-width: 640px) {
	.bsp-infokasten {
		padding: 2rem;
	}
}

.bsp-infokasten__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.bsp-infokasten__labels {
	margin-bottom: 0.75rem;
}

.bsp-infokasten__marke {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.bsp-infokasten__titel {
	margin: 0.25rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.375;
}

@media (min-width: 640px) {
	.bsp-infokasten__titel {
		font-size: 1.5rem;
	}
}

.bsp-infokasten__preis {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	font-size: 1rem;
}

.bsp-streichpreis {
	color: var(--bsp-ink-40);
}

.bsp-infokasten__versand {
	margin: 0;
	color: var(--bsp-ink-50);
	font-size: 0.75rem;
}

.bsp-kaufen {
	display: block;
}

/* Reiter */

.bsp-reiter__liste {
	display: flex;
	gap: 0.625rem;
}

@media (min-width: 640px) {
	.bsp-reiter__liste {
		gap: 1.5rem;
	}
}

.bsp-reiter__knopf {
	padding: 0 0 0.375rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--bsp-ink-50);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--bsp-dauer);
}

@media (min-width: 640px) {
	.bsp-reiter__knopf {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}
}

.bsp-reiter__knopf:hover {
	color: var(--bsp-ink);
}

.bsp-reiter__knopf[aria-selected="true"] {
	border-bottom-color: var(--bsp-ink);
	color: var(--bsp-ink);
}

.bsp-reiter__inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
}

.bsp-reiter__inhalt[hidden] {
	display: none;
}

.bsp-text,
.bsp-text p {
	margin: 0;
	color: var(--bsp-ink-70);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.bsp-text p + p {
	margin-top: 0.75rem;
}

.bsp-fullset {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: var(--bsp-weiss);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.bsp-fullset p {
	margin: 0;
	color: var(--bsp-ink-70);
}

.bsp-fullset .bsp-fullset__titel {
	color: var(--bsp-ink);
	font-weight: 700;
}

.bsp-fakten {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bsp-linie);
	font-size: 0.875rem;
}

.bsp-fakten__zeile {
	position: relative;
	display: flex;
	gap: 1rem;
}

.bsp-fakten dt {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.25rem;
	width: 8rem;
	color: var(--bsp-ink-50);
}

.bsp-fakten dd {
	margin: 0;
	min-width: 0;
}

.bsp-fakten__info {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bsp-ink-40);
	cursor: pointer;
	transition: color var(--bsp-dauer);
}

.bsp-fakten__info:hover {
	color: var(--bsp-ink);
}

.bsp-zustaende {
	position: absolute;
	top: 1.5rem;
	left: 0;
	z-index: 20;
	width: 18rem;
	max-width: calc(100vw - 4rem);
	padding: 1.25rem;
	border: 1px solid var(--bsp-linie);
	border-radius: 1rem;
	background: var(--bsp-weiss);
	color: var(--bsp-ink);
}

.bsp-zustaende[hidden] {
	display: none;
}

.bsp-zustaende dl {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
}

.bsp-zustaende dt {
	width: auto;
	margin-top: 0.625rem;
	color: var(--bsp-ink);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsp-zustaende dt:first-child {
	margin-top: 0;
}

.bsp-zustaende dd {
	color: var(--bsp-ink-60);
	font-size: 0.75rem;
	line-height: 1.25rem;
}

.bsp-fakten__notiz {
	padding-top: 0.5rem;
	color: var(--bsp-ink-70);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.bsp-fakten__notiz p {
	margin: 0 0 0.75rem;
}

.bsp-slot:empty {
	display: none;
}

.bsp-aufklapper-liste {
	border-top: 1px solid var(--bsp-linie);
}

.bsp-aufklapper {
	border-bottom: 1px solid var(--bsp-linie);
}

.bsp-aufklapper summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.bsp-aufklapper summary::-webkit-details-marker {
	display: none;
}

.bsp-aufklapper summary .bsp-symbol {
	transition: transform var(--bsp-dauer);
}

.bsp-aufklapper[open] summary .bsp-symbol {
	transform: rotate(180deg);
}

.bsp-aufklapper__text {
	padding-bottom: 1rem;
	color: var(--bsp-ink-70);
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.bsp-aufklapper__text p {
	margin: 0 0 0.75rem;
}

/* Lightbox */

.bsp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bsp-weiss);
	color: var(--bsp-ink);
}

.bsp-lightbox:not([open]) {
	display: none;
}

.bsp-lightbox__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem var(--bsp-rand);
	color: var(--bsp-ink-50);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bsp-lightbox button {
	display: inline-flex;
	padding: 0.25rem;
	border: 0;
	background: none;
	color: var(--bsp-ink);
	cursor: pointer;
}

.bsp-lightbox__bild {
	position: relative;
	flex: 1;
	min-height: 0;
}

.bsp-lightbox__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bsp-lightbox__fuss {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	padding: 1.5rem 1rem;
}

/* ---------- Warenkorb-Schublade (FluentCart) ----------
 * Wie KorbDrawer in bagstage-main: graue Schublade (30rem), weiße Karten je Stück, keine Mengenwahl
 * (Unikate), unten Zwischensumme, Pille „Zur Kasse“ mit Schloss, Versandhinweis, Link zum Warenkorb.
 */

.fct-cart-drawer-container,
.fct-cart-drawer {
	--fct-cart-drawer-bg: var(--bsp-grau);
	--fct-cart-drawer-primary-bg-color: var(--bsp-grau);
	--fct-cart-drawer-primary-text-color: var(--bsp-ink);
	--fct-cart-drawer-secondary-text-color: var(--bsp-ink-60);
	--fct-cart-drawer-border-color: var(--bsp-linie);
	--fct-cart-drawer-btn-bg-color: var(--bsp-pille);
	--fct-cart-drawer-btn-text-color: var(--bsp-weiss);
	--fct-cart-drawer-btn-hover-bg-color: var(--bsp-pille);
	--fct-cart-drawer-btn-hover-text-color: var(--bsp-weiss);
	--fct-btn-radius: 9999px;
	--fct-input-radius: 0.75rem;
	--fct-card-bg-color: var(--bsp-weiss);
}

body .fct-cart-drawer {
	width: 30rem;
	max-width: 100%;
	background: var(--bsp-grau);
	box-shadow: none;
	color: var(--bsp-ink);
	font-family: inherit;
	transition-duration: var(--bsp-dauer);
	transition-timing-function: ease-out;
}

body .fct-cart-drawer-overlay {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: none;
}

body .fct-cart-drawer-header {
	padding: 1.25rem 1.25rem 0.75rem;
	border: 0;
	background: transparent;
}

body .fct-cart-drawer-header .title {
	margin: 0;
	color: var(--bsp-ink);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 700;
}

body .fct-cart-drawer-header .title > span {
	color: var(--bsp-ink-60);
	font-size: 0.875rem;
	font-weight: 400;
}

body .fct-cart-drawer-close-button {
	border: 0;
	background: transparent;
	color: var(--bsp-ink);
	box-shadow: none;
}

body .fct-cart-drawer .bsp-timer {
	margin: 0 1.25rem 0.5rem;
	background: var(--bsp-weiss);
}

body .fct-cart-drawer-list {
	padding: 0.25rem 1.25rem 0;
}

body .fct-cart-drawer .fct-cart-item {
	margin: 0 0 0.5rem;
	padding: 0.625rem;
	border: 0;
	border-radius: 0.75rem;
	background: var(--bsp-weiss);
}

body .fct-cart-drawer .fct-cart-item-image,
body .fct-cart-drawer .fct-cart-item-image img {
	mix-blend-mode: multiply;
	width: 3.5rem;
	height: 4rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--bsp-grau);
	object-fit: cover;
}

body .fct-cart-drawer .fct-cart-item-title,
body .fct-cart-drawer .fct-cart-item-title a {
	color: var(--bsp-ink-80);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.375;
	text-decoration: none;
}

/* Unikate: keine Mengenwahl. */
body .fct-cart-drawer .fct-cart-item-quantity {
	display: none;
}

body .fct-cart-drawer .fct-cart-item-total {
	font-size: 0.75rem;
	font-weight: 700;
}

body .fct-cart-drawer-list .fct-cart-item .fct-cart-item-delete-button {
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--bsp-ink-60);
	box-shadow: none;
}

body .fct-cart-drawer-list .fct-cart-item .fct-cart-item-delete-button:hover {
	background: var(--bsp-grau);
	color: var(--bsp-ink);
}

body .fct-cart-drawer-footer {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px solid var(--bsp-linie);
	background: var(--bsp-grau);
	box-shadow: none;
}

body .fct-cart-drawer-footer .fct-cart-total-wrapper {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0;
	border: 0;
}

body .fct-cart-drawer-footer .fct-cart-total-wrapper > span:first-child {
	color: var(--bsp-ink);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body .fct-cart-drawer-footer [data-fluent-cart-cart-total-price] {
	color: var(--bsp-ink);
	font-size: 1.5rem;
	font-weight: 700;
}

body .fct-cart-drawer-footer .fct-cart-drawer-footer-actions {
	margin-top: 1.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.checkout-button:not(.view-cart-button) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-height: none;
	padding: 0.875rem 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: var(--bsp-pille);
	box-shadow: none;
	color: var(--bsp-weiss);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity var(--bsp-dauer);
}

body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.checkout-button::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.checkout-button:not(.view-cart-button):hover {
	background: var(--bsp-pille);
	color: var(--bsp-weiss);
	opacity: 0.8;
}

.bsp-korb-fuss {
	margin-top: 0.75rem;
	text-align: center;
}

.bsp-korb-fuss__hinweis {
	margin: 0;
	color: var(--bsp-ink-60);
	font-size: 12.5px;
}

body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.bsp-korb-fuss__link:not(.view-cart-button),
.bsp-korb-fuss__link {
	display: inline-block;
	width: auto;
	max-height: none;
	margin-top: 1rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--bsp-ink-70);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: opacity var(--bsp-dauer);
}

body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.bsp-korb-fuss__link:not(.view-cart-button):hover {
	background: none;
	color: var(--bsp-ink-70);
	opacity: 0.6;
}

.bsp-timer {
	margin: 0 0 0.75rem;
	padding: 0.625rem 0.875rem;
	border-radius: 0.75rem;
	background: var(--bsp-grau);
	color: var(--bsp-ink-70);
	font-size: 12.5px;
	line-height: 1.4;
}

.bsp-timer[hidden] {
	display: none;
}

.bsp-timer strong {
	color: var(--bsp-ink);
	font-variant-numeric: tabular-nums;
}

.bsp-timer button {
	display: inline;
	margin-left: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bsp-ink);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

@media (min-width: 640px) {
	body .fct-cart-drawer-header {
		padding: 1.5rem 2rem 0.75rem;
	}

	body .fct-cart-drawer .bsp-timer {
		margin-inline: 2rem;
	}

	body .fct-cart-drawer-list {
		padding-inline: 2rem;
	}

	body .fct-cart-drawer-footer {
		padding-inline: 2rem;
	}
}

/* ---------- Warenkorb-Seite (FluentCart, /cart/) ---------- */

body .fct-cart-page .fct-cart-item-quantity {
	display: none;
}

body .fct-cart-page .fct-cart-item-image img {
	border-radius: 0.5rem;
	background: var(--bsp-grau);
	mix-blend-mode: multiply;
}

body .fct-cart-page .fct-cart-total-wrapper {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

body .fct-cart-page .fct-cart-total-wrapper > span:first-child {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body .fct-cart-page [data-fluent-cart-cart-total-price] {
	font-size: 1.5rem;
	font-weight: 700;
}

body .fct-cart-page .fluent-cart-cart-cart-button-wrap {
	display: block;
	margin-top: 1.25rem;
}

body:not(.fluent-cart-no-colors) .fct-cart-page a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.875rem 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: var(--bsp-pille);
	box-shadow: none;
	color: var(--bsp-weiss);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity var(--bsp-dauer);
}

body:not(.fluent-cart-no-colors) .fct-cart-page a.checkout-button::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body:not(.fluent-cart-no-colors) .fct-cart-page a.checkout-button:hover {
	background: var(--bsp-pille);
	color: var(--bsp-weiss);
	opacity: 0.8;
}

body .fct-cart-page .bsp-timer {
	margin-bottom: 1rem;
	background: var(--bsp-weiss);
}

/* ---------- Checkout im Modal (FluentCart, falls „enable_modal_checkout“ an ist) ---------- */

body .fct-checkout-modal-container {
	background-color: rgba(0, 0, 0, 0.4);
	transition-duration: var(--bsp-dauer);
}

body .fct-checkout-modal {
	border-radius: 1rem;
	box-shadow: none;
	transition-duration: var(--bsp-dauer);
}

body .fct-checkout-modal-close {
	border-radius: 9999px;
	color: var(--bsp-ink);
	opacity: 1;
}

/* ---------- Checkout (FluentCart) ---------- */

.bsp-checkout-recht {
	margin: 0.5rem 0 1rem;
	color: var(--bsp-ink-70);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.bsp-checkout-recht p {
	margin: 0 0 0.5rem;
}

.bsp-checkout-recht a {
	color: var(--bsp-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fct_checkout .fct_place_order_btn {
	border-radius: 9999px !important;
	background: var(--bsp-pille) !important;
	color: var(--bsp-weiss) !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.bsp-rund,
	.bsp-pille,
	.bsp-karte__link,
	.bsp-karte__bild img,
	.bsp-karte__haken,
	.bsp-chip,
	.bsp-sort__option,
	.bsp-reiter__knopf,
	.bsp-aufklapper summary .bsp-symbol,
	.bsp-leiste__knopf .bsp-symbol--runter,
	body .fct-cart-drawer,
	body:not(.fluent-cart-no-colors) .fct-cart-drawer-footer a.checkout-button:not(.view-cart-button) {
		transition: none;
	}
}