label,
.woocommerce form .form-row label {
	display: block;
	margin: 0;
	font-size: var(--hp-text-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hp-text);
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--hp-space-2);
	font-weight: 400;
}

/* Core marks a field required with an abbr; it should read as emphasis, not as
 * an error. */
.required,
.woocommerce form .form-row .required {
	color: var(--hp-text-muted);
	text-decoration: none;
	border: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	min-height: 2.875rem; /* 46px */
	padding: var(--hp-space-3) var(--hp-space-4);
	background: var(--hp-surface);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
	color: var(--hp-text);
	font-family: var(--hp-font-ui);
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color var(--hp-duration-fast) var(--hp-ease),
		box-shadow var(--hp-duration-fast) var(--hp-ease);
}

textarea {
	min-height: 7rem;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--hp-border-strong);
	box-shadow: var(--hp-shadow-focus);
}

input::placeholder,
textarea::placeholder {
	color: var(--hp-text-muted);
	opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
	background: var(--hp-surface-subtle);
	color: var(--hp-text-disabled);
	cursor: not-allowed;
}

/* ---- validation ---- */

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
input[aria-invalid="true"] {
	border-color: var(--hp-sale);
}
.woocommerce form .form-row .woocommerce-error,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
	font-size: var(--hp-text-xs);
	color: var(--hp-sale);
}
.woocommerce form .form-row .description {
	font-size: var(--hp-text-xs);
	color: var(--hp-text-muted);
}

/* ---- choices ----
 * The radio rows on the checkout's delivery and payment cards.
 */

input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	min-height: 1.125rem;
	height: 1.125rem;
	margin: 0;
	padding: 0;
	flex: none;
	accent-color: var(--hp-accent);
}

.hp-choice.is-selected{
	border-color: var(--hp-text);
}

/* ---- search form ---- */

.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--hp-space-2);
}

/* ---- third-party forms ----
 * Contact Form 7 and MailPoet wrap their controls in their own paragraphs.
 * Nothing here reaches inside their markup; it only stops the wrappers adding
 * margins the theme's spacing has already accounted for.
 */

.wpcf7-form p,
.mailpoet_paragraph {
	margin-block: 0 var(--hp-space-4);
}

.wpcf7-form p:last-child,
.mailpoet_paragraph:last-child {
	margin-block-end: 0;
}

.wpcf7-not-valid-tip {
	margin-block-start: var(--hp-space-1);
	font-size: var(--hp-text-xs);
	color: var(--hp-sale);
}

.wpcf7-response-output {
	margin: var(--hp-space-4) 0 0;
	padding: var(--hp-space-3) var(--hp-space-4);
	border: none;
	border-inline-start: 3px solid var(--hp-accent);
	border-radius: var(--hp-radius);
	background: var(--hp-surface-subtle);
	font-size: var(--hp-text-sm);
}