/**
 * Produktfelder (Marke, Metadaten, Eigenschaften): Struktur.
 *
 * Alle veränderlichen Werte kommen als `--pasp-*`-Custom-Properties aus
 * PAS_Product_Fields_Design_CSS und werden pro Typ auf `.pasp-field--<typ>` gesetzt.
 * Hier stehen nur Struktur und Fallbacks (Theme erbt, wo keine Variable gesetzt ist).
 */

.pasp-field {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pasp-gap, 4px);
	justify-content: var(--pasp-justify, flex-start);
	margin: 0 0 8px;
}

/* Mehrere Produktfelder in einer semantischen, leerwertsicheren Inline-Liste. */
.pasp-field-list {
	display: inline;
}

.pasp-field-list .pasp-field {
	display: inline;
	margin: 0;
}

/* Textfelder folgen dem normalen Zeilenumbruch: kein hängender Einzug und
   kein sichtbares Leerzeichen am Anfang einer neuen Zeile. */
.pasp-field-list .pasp-field--text .pasp-field__value,
.pasp-field-list .pasp-field--text .pasp-field__item,
.pasp-field-list .pasp-field--text .pasp-field__sep {
	display: inline;
}

.pasp-field-list .pasp-field--text .pasp-field__sep {
	margin-left: 0;
}

/* Präfix/Suffix werden außerhalb des Flex-Layouts nicht mehr über `gap`
   getrennt. Das normale Leerzeichen darf bei einem Zeilenumbruch kollabieren. */
.pasp-field-list .pasp-field--text .pasp-field__pre::after,
.pasp-field-list .pasp-field--text .pasp-field__post::before {
	content: ' ';
}

.pasp-field-list__sep {
	white-space: normal;
}

/* Bildfelder bleiben für ihre vertikale Ausrichtung als kleine Flex-Zeile erhalten. */
.pasp-field-list .pasp-field--image {
	display: inline-flex;
	align-items: center;
}

/* Bilder mittig zur Textzeile statt auf der Grundlinie. */
.pasp-field--image {
	align-items: center;
}

/* Text vor und nach dem Wert – „Lieferzeit:" … „Tage". */
.pasp-field__pre,
.pasp-field__post {
	color: var(--pasp-label-color, inherit);
	font-family: var(--pasp-label-font-family, inherit);
	font-weight: var(--pasp-label-font-weight, inherit);
	font-size: var(--pasp-label-font-size, inherit);
	line-height: 1.4;
}

/* Der Wert selbst. */
.pasp-field__value {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: inherit;
	gap: var(--pasp-gap, 4px);
	min-width: 0;
}

.pasp-field__item,
.pasp-field__sep,
.pasp-field__empty {
	color: var(--pasp-value-color, inherit);
	font-family: var(--pasp-value-font-family, inherit);
	font-weight: var(--pasp-value-font-weight, inherit);
	font-size: var(--pasp-value-font-size, inherit);
	line-height: 1.4;
}

/* Das Trennzeichen klebt am vorangehenden Wert (kein gap davor). */
.pasp-field__sep {
	margin-left: calc(var(--pasp-gap, 4px) * -1);
}

/* Verlinkter Wert erbt die Wert-Schrift, nur die Farbe ist eigenständig. */
.pasp-field__link {
	color: var(--pasp-link-color, inherit);
	font: inherit;
	text-decoration: none;
}

.pasp-field__link:hover,
.pasp-field__link:focus-visible {
	color: var(--pasp-link-color-hover, inherit);
	text-decoration: underline;
}

/* Bild-Ausgabe: Min-/Max-Grenzen kommen aus dem Design, 0 = keine Begrenzung
   (dann ist die Variable gar nicht gesetzt und der Fallback greift).
   `--pasp-img-width`/`--pasp-img-height` setzt der CSS-Generator nur bei
   „Zuschneiden" – object-fit: cover braucht einen festen Rahmen, um zu wirken. */
.pasp-field__img {
	display: block;
	width: var(--pasp-img-width, auto);
	height: var(--pasp-img-height, auto);
	min-width: var(--pasp-img-min-width, 0);
	max-width: var(--pasp-img-max-width, 100%);
	min-height: var(--pasp-img-min-height, 0);
	max-height: var(--pasp-img-max-height, none);
	object-fit: var(--pasp-img-fit, contain);
	border-radius: var(--pasp-img-radius, 0);
}

.pasp-field__empty {
	font-style: italic;
}

/* Eigenständiger Lagerstatus: Text und Farbe stammen aus der Produktfelder-Konfiguration. */
.pasp-stock-status {
	margin: 0 0 8px;
	font-weight: 600;
}