/**
 * modual/product-properties block
 *
 * Verwendet die theme.json-Design-Tokens (--wp--preset--color--*, --wp--custom--*)
 * mit hardcodierten Fallbacks, damit der Block auch ausserhalb des modual-brand
 * Themes sauber aussieht.
 */

.mc-product-properties {
	--mc-pp-border: var(--wp--preset--color--border, #e2e8f0);
	--mc-pp-text: var(--wp--preset--color--text, #1a202c);
	--mc-pp-muted: var(--wp--preset--color--grey-600, #64748b);
	--mc-pp-radius: var(--wp--custom--radius--md, 8px);

	margin: 1.5rem 0;
	color: var(--mc-pp-text);
}

.mc-product-properties__title {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: var(--wp--custom--weight--medium, 600);
	margin: 0 0 0.75rem;
}

.mc-product-properties__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--mc-pp-border);
}

.mc-product-properties__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--mc-pp-border);
}

.mc-product-properties__label {
	margin: 0;
	color: var(--mc-pp-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.mc-product-properties__value {
	margin: 0;
	text-align: right;
	font-weight: var(--wp--custom--weight--medium, 600);
}

/* Editor-Platzhalter ohne Produktkontext */
.mc-product-properties--placeholder {
	padding: 1rem 1.25rem;
	border: 1px dashed var(--wp--preset--color--border, #cbd5e1);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--grey-50, #f8fafc);
	color: var(--wp--preset--color--grey-600, #64748b);
	font-size: 0.875rem;
}

.mc-product-properties--placeholder p {
	margin: 0;
}

@media (max-width: 480px) {
	.mc-product-properties__row {
		flex-direction: column;
		gap: 0.125rem;
	}

	.mc-product-properties__value {
		text-align: left;
	}
}