.cemacon-product-specs {
	--cemacon-product-specs-row-gap: 16px;
	--cemacon-product-specs-column-gap: 16px;
	--cemacon-product-specs-columns: 2;
	--cemacon-product-specs-icon-size: 40px;
	--cemacon-product-specs-value-color: #6b7076;
	--cemacon-product-specs-icon-fallback-bg: #d3d6da;
	--cemacon-product-specs-placeholder-color: #a4a9ae;

	display: flex;
	flex-direction: column;
	row-gap: var(--cemacon-product-specs-row-gap);
}

.cemacon-product-specs--layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--cemacon-product-specs-columns), 1fr);
	column-gap: var(--cemacon-product-specs-column-gap);
	row-gap: var(--cemacon-product-specs-row-gap);
}

.cemacon-product-specs__row {
	display: flex;
	flex-direction: column;
	row-gap: 4px;
	min-width: 0; /* let rows shrink to their grid column instead of overflowing it */
}

.cemacon-product-specs__label {
	font-weight: 700;
}

.cemacon-product-specs__value {
	color: var(--cemacon-product-specs-value-color);
	overflow-wrap: anywhere;
}

/* Forme row: label+value text on the left, icons (no per-icon label) on the
   right - overrides the default column stacking used by every other row. */
.cemacon-product-specs__row--forme {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
}

.cemacon-product-specs__text {
	flex: 1 1 auto;
	min-width: 0; /* the shrink/grow-able side - text wraps instead of pushing icons out */
	display: flex;
	flex-direction: column;
	row-gap: 4px;
}

.cemacon-product-specs__icon-list {
	flex: 0 0 auto; /* the fixed side - never shrinks or grows, wraps to a new line instead */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	column-gap: 12px;
	row-gap: 8px;
}

.cemacon-product-specs__icon {
	flex: 0 0 auto;
	width: var(--cemacon-product-specs-icon-size);
	height: var(--cemacon-product-specs-icon-size);
	object-fit: contain;
}

.cemacon-product-specs__icon--fallback {
	display: block;
	background: var(--cemacon-product-specs-icon-fallback-bg);
	border-radius: 4px;
}

.cemacon-product-specs--placeholder {
	color: var(--cemacon-product-specs-placeholder-color);
	font-style: italic;
}