/* EINFACH und SO-kreativ — Child-Theme: mobile WooCommerce-Korrekturen
 *
 * Behebt vier konkrete Mobile-UX-Probleme, die in den Parent-Theme-Dateien
 * (musea/assets/css/woocommerce.min.css, woocommerce-responsive.min.css)
 * nicht abgedeckt sind. Ausschliesslich innerhalb des mobilen Breakpoints
 * (max-width: 680px, wie vom Parent-Theme selbst als Mobile-Grenze verwendet)
 * - Desktop-Darstellung bleibt unveraendert.
 */

@media only screen and (max-width: 680px) {

	/* A1 — Warenkorb: Einzelpreis und Zwischensumme beschriften.
	   Beide Zellen tragen bereits ein data-title-Attribut
	   ("Preis" / "Zwischensumme"), das Parent-Theme blendet es auf Mobile
	   aber nirgends ein, wodurch zwei gleich aussehende Betraege
	   unbeschriftet untereinanderstehen. */
	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart td.product-subtotal {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		width: 100%;
		gap: 12px;
	}

	.woocommerce-cart table.cart td.product-price::before,
	.woocommerce-cart table.cart td.product-subtotal::before {
		content: attr(data-title);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: #767676;
		text-transform: none;
		white-space: nowrap;
	}

	/* A2 — Warenkorb: "Warenkorbsumme"-Ueberschrift verkleinern.
	   Unformatierter WooCommerce-Standard-h2 (.cart_totals h2), erbt sonst
	   die grosse Desktop-Ueberschriftengroesse des Parent-Themes. */
	.woocommerce-cart .cart_totals > h2 {
		font-size: 18px;
		line-height: 1.3;
		word-break: normal;
		overflow-wrap: normal;
	}

	/* A3 — Checkout: "An eine andere Adresse liefern?" haelt sich nicht an
	   den Viewport. Ursache ist ein white-space:nowrap, dessen genaue
	   Herkunfts-Regel sich nicht eindeutig einer einzelnen Parent-Datei
	   zuordnen liess; !important hier daher bewusst und gezielt nur auf
	   dieser einen Eigenschaft, um die Ursache sicher zu neutralisieren. */
	#ship-to-different-address {
		display: flex;
		align-items: flex-start;
	}

	#ship-to-different-address label {
		display: inline-flex;
		align-items: flex-start;
		gap: 8px;
		white-space: normal !important;
		overflow-wrap: break-word;
		font-size: 14px;
		line-height: 1.4;
	}

	#ship-to-different-address label input[type="checkbox"] {
		flex-shrink: 0;
		margin-top: 3px;
	}

	/* A4 — Mein Konto: "Anmelden" / "Registrieren" verkleinern.
	   Gleiche Fehlerursache wie A2: unformatierter WooCommerce-Standard-h2
	   (#customer_login h2) ohne Mobile-Anpassung im Parent-Theme. */
	.woocommerce-account #customer_login h2 {
		font-size: 18px;
		line-height: 1.3;
		word-break: normal;
		overflow-wrap: normal;
	}

}