.hhchf-configurator {
	--hhchf-accent-color: var( --primary-color, var( --fs-color-primary, var( --wp--preset--color--accent-1, var( --wp--preset--color--primary, Highlight ) ) ) );
	border-block: 1px solid color-mix( in srgb, currentColor 18%, transparent );
	margin: 1.25rem 0;
	padding: 1.25rem 0;
}

.hhchf-configurator h2 {
	margin: 0 0 1.25rem;
}

.hhchf-step {
	border: 0;
	margin: 0 0 3rem;
	min-width: 0;
	padding: 0;
}

.hhchf-step legend,
.hhchf-quantity-heading {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 1rem;
	padding: 0;
}

.hhchf-step legend span,
.hhchf-quantity-heading span {
	display: inline-block;
	min-width: 1.5em;
}

.hhchf-card-grid {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.hhchf-choice-card {
	align-items: center;
	border: 1px solid color-mix( in srgb, currentColor 24%, transparent );
	border-radius: 0.45rem;
	cursor: pointer;
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.7rem;
	position: relative;
	text-align: center;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.hhchf-choice-card.is-text-only {
	align-content: center;
	min-height: 5.25rem;
	padding-block: 0.9rem;
}

.hhchf-choice-card:hover {
	transform: translateY( -1px );
}

.hhchf-choice-card:has( input:checked ) {
	background: color-mix( in srgb, var( --hhchf-accent-color ) 9%, transparent );
	border-color: var( --hhchf-accent-color );
	box-shadow: inset 0 0 0 2px var( --hhchf-accent-color );
}

.hhchf-choice-card:focus-within {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.hhchf-choice-card input {
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.hhchf-card-visual {
	align-items: center;
	background: color-mix( in srgb, currentColor 6%, transparent );
	border-radius: 0.3rem;
	display: flex;
	aspect-ratio: 4 / 3;
	justify-content: center;
	max-height: 9rem;
	overflow: hidden;
	width: 100%;
}

.hhchf-card-visual img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.hhchf-choice-card strong,
.hhchf-choice-card small,
.hhchf-card-description {
	overflow-wrap: anywhere;
}

.hhchf-choice-card small {
	opacity: 0.78;
}

.hhchf-card-description {
	font-size: 0.875em;
	line-height: 1.35;
	opacity: 0.78;
}

.hhchf-personalization {
	display: block;
}

.hhchf-personalization legend {
	width: 100%;
}

.hhchf-special-instructions {
	margin: 0 0 3rem;
	width: 100%;
}

.hhchf-needed-by-step {
	margin-bottom: 1.25rem;
}

.hhchf-price-guide {
	display: inline-block;
}

.hhchf-price-helper {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 0.25rem;
}

.hhchf-field {
	display: grid;
	gap: 0.35rem;
}

.hhchf-field > span {
	font-weight: 600;
}

.hhchf-field input,
.hhchf-field textarea {
	box-sizing: border-box;
	font: inherit;
	width: 100%;
}

.hhchf-field small,
.hhchf-help,
.hhchf-estimate-note {
	font-size: 0.875em;
	opacity: 0.75;
}

.hhchf-price-summary {
	background: color-mix( in srgb, currentColor 5%, transparent );
	border-radius: 0.45rem;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	padding: 0.9rem;
}

.hhchf-price-summary div {
	display: grid;
	gap: 0.15rem;
}

.hhchf-price-summary span {
	font-size: 0.85em;
	opacity: 0.76;
}

.hhchf-price-summary strong {
	font-size: 1.05em;
}

.hhchf-estimate-note {
	margin: 0.5rem 0 0;
}

.hhchf-quantity-heading {
	margin-top: 2rem;
}

.hhchf-quantity-input {
	box-sizing: border-box;
	font: inherit;
	min-height: 2.75rem;
	min-width: 4.5rem;
}

@media ( max-width: 849px ) {
	.hhchf-card-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 549px ) {
	.hhchf-step {
		margin-bottom: 2rem;
	}

	.hhchf-step legend,
	.hhchf-quantity-heading {
		margin-bottom: 0.875rem;
	}

	.hhchf-needed-by-step {
		margin-bottom: 1rem;
	}

	.hhchf-special-instructions {
		margin-bottom: 2rem;
	}

	.hhchf-quantity-heading {
		margin-top: 1.5rem;
	}

	.hhchf-price-summary {
		grid-template-columns: 1fr;
	}

	.hhchf-card-grid {
		gap: 0.55rem;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.hhchf-choice-card {
		gap: 0.3rem;
		padding: 0.55rem;
	}

	.hhchf-choice-card.is-text-only {
		min-height: 4.75rem;
	}

	.hhchf-card-visual {
		aspect-ratio: 3 / 2;
		max-height: 5.25rem;
	}
}

@media ( max-width: 359px ) {
	.hhchf-card-grid {
		grid-template-columns: 1fr;
	}
}

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