/*
 * Layout für die OE-Nummer im Produkt-Meta-Block (single-product/meta.php).
 *
 * Ausgangslage: Das Elementor-Widget "Produkt-Meta" läuft auf dieser Seite in
 * der Tabellen-Ansicht (.elementor-woo-meta--view-table). Diese setzt auf
 * .product_meta ein flex-direction: column und gibt jeder Beschriftung eine
 * Mindestbreite, wodurch Artikelnummer und OE-Nummer zwangsläufig
 * untereinander stehen.
 *
 * Gewünscht ist: auf dem Desktop stehen beide Nummern nebeneinander, damit die
 * Produktbeschreibung nicht weiter nach unten rutscht; auf schmalen
 * Bildschirmen stehen sie untereinander. Dafür wird die Spaltenrichtung ab
 * 601px auf eine Zeile umgestellt und die Mindestbreite der Beschriftung
 * aufgehoben. Unterhalb von 601px bleibt die Tabellen-Ansicht unangetastet.
 *
 * Die OE-Nummer wird über woocommerce_product_meta_start ausgegeben und steht
 * damit technisch vor der Artikelnummer; die Reihenfolge wird hier per order
 * korrigiert, siehe MWD_SP_OE_Nummer::render_frontend_meta().
 */

.single-product .product_meta .sku_wrapper {
	order: 1;
}

.single-product .product_meta .mwd-oe-nummer-wrapper {
	order: 2;
}

.single-product .product_meta .posted_in {
	order: 3;
}

.single-product .product_meta .tagged_as {
	order: 4;
}

@media (min-width: 601px) {

	/*
	 * Der Widget-Wrapper steht bewusst mit im Selektor: Elementors eigene
	 * Regel für die Tabellen-Ansicht ist gleich spezifisch und wird später
	 * geladen, ohne diesen Zusatz bliebe flex-direction: column bestehen.
	 */
	.single-product .elementor-widget-woocommerce-product-meta .product_meta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 2em;
		row-gap: 0.25em;
	}

	/* Beschriftung und Wert dürfen in der Zeile zusammenrücken. */
	.single-product .elementor-widget-woocommerce-product-meta .sku_wrapper .detail-label,
	.single-product .elementor-widget-woocommerce-product-meta .mwd-oe-nummer-wrapper .detail-label {
		min-width: 0;
		margin-right: 0.4em;
	}

	/* Kategorien und Schlagwörter behalten ihre eigene Zeile. */
	.single-product .product_meta .posted_in,
	.single-product .product_meta .tagged_as {
		flex-basis: 100%;
	}
}