/* The component intentionally inherits the active theme's font family. */
.phw-product-highlights {
	margin: 0 0 16px;
	padding: 0;
	font-family: inherit;
}

/*
 * Cards are flexible rather than locked to equal-width grid columns. A longer
 * text expands its own card; the next card moves to a new row instead of the
 * text wrapping inside the card.
 */
.phw-product-highlights__grid {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	gap: 7px;
	margin: 0;
	padding: 0;
}

.phw-highlight-card {
	box-sizing: border-box;
	display: flex;
	min-width: 126px;
	min-height: 50px;
	flex: 1 1 max-content;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding: 7px 12px 8px;
	border: 1px solid rgba(33, 26, 26, 0.015);
	border-radius: 9px;
	/* Slightly deeper neutral surface for clearer separation from the page. */
	background: #e6e0e0;
	box-shadow: 0 1px 2px rgba(36, 25, 25, 0.035);
	color: inherit;
	direction: rtl;
	font-family: inherit;
	font-kerning: normal;
	text-align: right;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.phw-highlight-card:hover {
	background: #ece7e7;
	box-shadow: 0 5px 16px rgba(41, 29, 29, 0.075);
	transform: translateY(-1px);
}

.phw-highlight-card__top,
.phw-highlight-card__bottom {
	font-family: inherit;
	line-height: 1.3;
	white-space: nowrap;
}

/* Deliberate hierarchy: a quiet label above a crisp, stronger value. */
.phw-highlight-card__top {
	margin-bottom: 3px;
	color: #706a6a;
	font-size: clamp(11px, 0.68vw, 12.5px);
	font-weight: 500;
}

.phw-highlight-card__bottom {
	color: #221e1e;
	font-size: clamp(11px, 0.68vw, 12.5px);
	font-weight: 600;
}

.phw-highlight-card--without-top {
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 440px) {
	.phw-product-highlights__grid {
		gap: 6px;
	}

	.phw-highlight-card {
		min-width: 116px;
		min-height: 45px;
		padding-right: 7px;
		padding-left: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phw-highlight-card {
		transition: none;
	}

	.phw-highlight-card:hover {
		transform: none;
	}
}