.tsaff-products {
	margin: 1.5em 0;
}

.tsaff-products__heading {
	margin: 0 0 .3em;
}

.tsaff-products__intro {
	margin: 0 0 1.2em;
	color: var(--sd-muted, #5a5a5a);
}

.tsaff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

/* ── Karten-Raster (Standard) ─────────────────────────────────────────────── */

.tsaff-products--card .tsaff-list { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
	.tsaff-products--card.tsaff-cols-2 .tsaff-list,
	.tsaff-products--card.tsaff-cols-3 .tsaff-list,
	.tsaff-products--card.tsaff-cols-4 .tsaff-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.tsaff-products--card.tsaff-cols-3 .tsaff-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tsaff-products--card.tsaff-cols-4 .tsaff-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tsaff-products--card .tsaff-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sd-surface, #fff);
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius, 8px);
	box-shadow: var(--sd-shadow-sm, 0 2px 8px rgba(0, 0, 0, .06));
	padding: 1rem;
	font-family: var(--sd-font, inherit);
}

.tsaff-item__media {
	margin: -.25rem 0 .75rem;
	text-align: center;
}

.tsaff-item__img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sd-radius-sm, 4px);
}

.tsaff-item__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: .35rem;
}

/* Der Kartentitel ist ein Absatz, keine Überschrift — Begründung im Renderer
 * (class-products.php, item_html). Er trägt deshalb sein Gewicht selbst. */
.tsaff-item__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.tsaff-item__title a {
	text-decoration: none;
	color: inherit;
}

.tsaff-item__title a:hover,
.tsaff-item__title a:focus { text-decoration: underline; }

.tsaff-item__subtitle {
	margin: 0;
	font-size: .9rem;
	color: var(--sd-muted, #5a5a5a);
}

.tsaff-item__blurb {
	margin: 0;
	font-size: .95rem;
}

.tsaff-item__price {
	margin: 0;
	font-size: .95rem;
}

.tsaff-item__price-note {
	font-size: .8rem;
	color: var(--sd-muted, #5a5a5a);
}

/* `justify-self` gehört dazu, nicht nur `align-self`: in den Varianten, deren
 * Karte ein Grid ist (Liste, große Karte), zieht ein Grid-Kind sich sonst über die
 * ganze Spaltenbreite — das Badge lief als goldener Balken quer über die Karte. */
.tsaff-item__badge {
	align-self: flex-start;
	justify-self: start;
	display: inline-block;
	margin-bottom: .5rem;
	padding: .12em .6em;
	font-size: .78rem;
	border-radius: var(--sd-radius-pill, 999px);
	background: var(--sd-gold, #f0ba37);
	color: var(--sd-gold-ink, #2a1f00);
}

/* ── Der Button ───────────────────────────────────────────────────────────────
 * Erste Wahl sind die Primitiven .sd-btn/.sd-btn--primary aus tokens.css. Auf einer
 * Instanz ohne ts-sudoku gibt es die nicht — dann trägt .tsaff-btn dieselbe
 * Geometrie und dieselbe EINE Schriftstärke nach. Schrift bleibt in jedem Fall
 * dunkel; weiße Button-Schrift ist projektweit verboten. */
.tsaff-btn {
	display: inline-block;
	align-self: flex-start;
	margin-top: .6rem;
	padding: .55em 1.1em;
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius, 8px);
	background: var(--sd-gold, #f0ba37);
	color: var(--sd-gold-ink, #2a1f00);
	font-weight: var(--sd-btn-weight, 600);
	font-family: var(--sd-font, inherit);
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
}

.tsaff-btn:hover,
.tsaff-btn:focus {
	background: var(--sd-gold-dark, #e0a91f);
	color: var(--sd-gold-ink, #2a1f00);
}

/* Der Button steht unten bündig, egal wie lang der Kurztext darüber ist — sonst
 * hängen die Knöpfe zweier gleich hoher Karten auf verschiedenen Höhen.
 * Diese Regel MUSS nach `.tsaff-btn` stehen: beide haben dieselbe Spezifität, und
 * `.tsaff-btn { margin-top: .6rem }` würde das `auto` sonst schlicht überschreiben. */
.tsaff-item__cta { margin-top: auto; }

.tsaff-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.tsaff-inline { display: inline-block; }

/* ── Liste ────────────────────────────────────────────────────────────────── */

.tsaff-products--list .tsaff-list { gap: .5rem; }

.tsaff-products--list .tsaff-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .9rem;
	padding: .8rem 1rem;
	background: var(--sd-surface, #fff);
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius, 8px);
	font-family: var(--sd-font, inherit);
}

.tsaff-products--list .tsaff-item--textonly { grid-template-columns: 1fr; }

.tsaff-products--list .tsaff-item__media { margin: 0; width: 72px; }

.tsaff-products--list .tsaff-item__body { gap: .2rem; }

@media (min-width: 700px) {
	.tsaff-products--list .tsaff-item__body {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 1rem;
	}
	.tsaff-products--list .tsaff-item__cta { margin-top: 0; grid-row: 1 / span 4; grid-column: 2; }
}

/* ── Leiste und Karussell ─────────────────────────────────────────────────── */

.tsaff-products--strip .tsaff-list,
.tsaff-products--carousel .tsaff-list {
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 1fr);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: .4rem;
}

.tsaff-products--strip .tsaff-item,
.tsaff-products--carousel .tsaff-item {
	scroll-snap-align: start;
	text-align: center;
	padding: .8rem;
	background: var(--sd-surface, #fff);
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius, 8px);
	font-family: var(--sd-font, inherit);
}

.tsaff-products--strip .tsaff-item__body,
.tsaff-products--carousel .tsaff-item__body { align-items: center; }

.tsaff-products--strip .tsaff-item__title,
.tsaff-products--carousel .tsaff-item__title { font-size: .95rem; }

.tsaff-carousel {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .4rem;
}

/* Kein Autoplay: bewegte Rotation wandert weg, während man liest, und kostet in
 * der Barrierefreiheits-Prüfung Punkte. Wischen und Tastatur gehen ohne JS, die
 * zwei Pfeile sind der einzige JS-Anteil. */
.tsaff-carousel__nav {
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius-pill, 999px);
	background: var(--sd-surface, #fff);
	color: var(--sd-text, #222);
	font-size: 1.4rem;
	line-height: 1;
	padding: .2em .55em;
	cursor: pointer;
	font-weight: var(--sd-btn-weight, 600);
}

.tsaff-carousel__nav[hidden] { visibility: hidden; }

/* ── Seitenspalte ─────────────────────────────────────────────────────────── */

.tsaff-products--rail .tsaff-list { gap: .7rem; }

.tsaff-products--rail .tsaff-item {
	padding: .8rem;
	background: var(--sd-surface, #fff);
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius, 8px);
	font-family: var(--sd-font, inherit);
	text-align: center;
}

.tsaff-products--rail .tsaff-item__title { font-size: .95rem; }

/* ── Große Karte ──────────────────────────────────────────────────────────── */

.tsaff-products--hero .tsaff-item {
	display: grid;
	gap: 1.2rem;
	padding: 1.2rem;
	background: var(--sd-surface-2, #f7f7f7);
	border: 1px solid var(--sd-line, #e0e0e0);
	border-radius: var(--sd-radius-lg, 12px);
	box-shadow: var(--sd-shadow-sm, 0 2px 8px rgba(0, 0, 0, .06));
	font-family: var(--sd-font, inherit);
}

@media (min-width: 700px) {
	.tsaff-products--hero .tsaff-item { grid-template-columns: minmax(0, 260px) 1fr; align-items: center; }
	.tsaff-products--hero .tsaff-item--textonly { grid-template-columns: 1fr; }
}

.tsaff-products--hero .tsaff-item__title { font-size: 1.3rem; }

/* ── Pflichthinweis ───────────────────────────────────────────────────────── */

.tsaff-disclosure {
	margin: 1rem 0 0;
	font-size: .85rem;
	color: var(--sd-muted, #5a5a5a);
}

/* ── Dunkel ───────────────────────────────────────────────────────────────────
 * Fast alles dreht sich von selbst mit, weil die Werte oben Tokens sind. Nur die
 * Fallback-Werte müssen für eine Instanz ohne tokens.css nachgezogen werden. */

html[data-theme="dark"] .tsaff-products--card .tsaff-item,
html[data-theme="dark"] .tsaff-products--list .tsaff-item,
html[data-theme="dark"] .tsaff-products--strip .tsaff-item,
html[data-theme="dark"] .tsaff-products--carousel .tsaff-item,
html[data-theme="dark"] .tsaff-products--rail .tsaff-item,
html[data-theme="dark"] .tsaff-carousel__nav {
	background: var(--sd-surface, #23262d);
	border-color: var(--sd-line, #3a4049);
	color: var(--sd-text, #e6e6e6);
}

html[data-theme="dark"] .tsaff-products--hero .tsaff-item {
	background: var(--sd-surface-2, #2a2d35);
	border-color: var(--sd-line, #3a4049);
	color: var(--sd-text, #e6e6e6);
}

@media (prefers-reduced-motion: reduce) {
	.tsaff-products--carousel .tsaff-list { scroll-behavior: auto; }
}