.woocommerce form .form-row,
.woocommerce-page form .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 1rem;
	padding: 0;
	float: none;
	width: auto;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	margin: 0 0 0.375rem;
	font-family: var(--sl-font-ui);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sl-grey-700);
}

.woocommerce form .form-row::before,
.woocommerce form .form-row::after,
.woocommerce-page form .form-row::before,
.woocommerce-page form .form-row::after {
	display: none;
}

.woocommerce form .form-row[hidden],
.woocommerce-page form .form-row[hidden] {
	display: none;
}

.woocommerce .woocommerce-input-wrapper,
.woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
	margin: 0;
}

.woocommerce abbr.required,
.woocommerce .form-row label .required {
	margin-left: 0;
	border: 0;
	font-family: var(--sl-font-ui);
	font-weight: 600;
	color: var(--sl-danger);
	text-decoration: none;
	cursor: default;
}

.woocommerce .form-row label .optional {
	font-weight: 400;
	color: var(--sl-grey-500);
}

.woocommerce form .form-row :is(input.input-text, textarea),
.woocommerce-page form .form-row :is(input.input-text, textarea),
.woocommerce
	:is(
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="password"],
		input[type="number"],
		input[type="search"],
		textarea
	) {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0.625rem 0.875rem;
	background: var(--sl-white);
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-sm);
	box-shadow: none;
	font-family: var(--theme-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sl-grey-900);
	transition: border-color 0.2s;
}

.woocommerce form .form-row textarea.input-text,
.woocommerce-page form .form-row textarea.input-text,
.woocommerce textarea {
	min-height: 7.125rem;
	line-height: 1.4;
	resize: vertical;
}

.woocommerce ::placeholder {
	color: var(--sl-grey-400);
	opacity: 1;
}

.woocommerce :is(input, select, textarea):focus {
	border-color: var(--sl-black);
	outline: none;
}

.woocommerce :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}

.woocommerce select,
.woocommerce .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0.625rem 2.25rem 0.625rem 0.875rem;
	background-color: var(--sl-white);
	background-image: url("../template-img/icon_chevron_down.svg");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	background-size: 1rem 1rem;
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-sm) !important;
	box-shadow: none;
	font-family: var(--theme-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sl-grey-900);
	appearance: none;
	cursor: pointer;
	transition: border-color 0.2s;
}

.woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--sl-black);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.3;
	color: inherit;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--sl-grey-400);
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	display: none;
}

.woocommerce .select2-container .select2-selection--single {
	position: relative;
}

.woocommerce .select2-container .select2-selection__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1;
	color: var(--sl-grey-600);
	transform: translateY(-50%);
}

.select2-container--default .select2-dropdown {
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-sm);
	box-shadow: 0 8px 24px rgb(17 24 39 / 8%);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sl-grey-300);
	border-radius: var(--sl-radius-xs);
	font-family: var(--theme-font);
	font-size: 0.875rem;
}

.select2-container--default .select2-results__option {
	padding: 0.5rem 0.875rem;
	font-family: var(--theme-font);
	font-size: 0.875rem;
	line-height: 1.4;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--sl-grey-50);
	color: var(--sl-black);
}

.woocommerce :is(label.checkbox, label.woocommerce-form__label-for-checkbox),
.woocommerce form .form-row :is(label.checkbox, label.woocommerce-form__label-for-checkbox),
.woocommerce-page form .form-row :is(label.checkbox, label.woocommerce-form__label-for-checkbox) {
	display: block;
	position: relative;
	margin: 0;
	padding-left: var(--sl-checkbox-indent);
	font-family: var(--theme-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sl-grey-900);
	cursor: pointer;
}

.woocommerce
	:is(label.checkbox, label.woocommerce-form__label-for-checkbox)
	:is(input[type="checkbox"], input[type="radio"]) {
	position: absolute;
	top: 0.0625rem;
	left: 0;
}

.woocommerce :is(input[type="checkbox"], input[type="radio"]),
.woocommerce form .form-row :is(input[type="checkbox"], input[type="radio"]) {
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	margin: 0;
	background-color: var(--sl-grey-50);
	background-position: center;
	background-repeat: no-repeat;
	/* grey-500: a control's edge needs 3:1 against white (WCAG 1.4.11). */
	border: 1px solid var(--sl-grey-500);
	appearance: none;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background-color 0.15s;
}

.woocommerce input[type="checkbox"],
.woocommerce form .form-row input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--sl-white);
	border-radius: var(--sl-radius-xs);
}

.woocommerce input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
}

.woocommerce :is(input[type="checkbox"], input[type="radio"]):checked,
.woocommerce form .form-row :is(input[type="checkbox"], input[type="radio"]):checked {
	background-color: var(--sl-black);
	border-color: var(--sl-black);
}

.woocommerce input[type="checkbox"]:checked,
.woocommerce form .form-row input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3 4.5 6.2 11.6 2.7 8.1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 0.75rem 0.75rem;
}

.woocommerce input[type="radio"]:checked,
.woocommerce form .form-row input[type="radio"]:checked {
	background-color: var(--sl-white);
	box-shadow: inset 0 0 0 0.3125rem var(--sl-black);
}

.woocommerce :is(input[type="checkbox"], input[type="radio"]):hover {
	border-color: var(--sl-grey-600);
}

/* The frame and the message below it carry the error; the label stays as it is.
   These three match the shape woocommerce.css uses, which paints the label red
   and a filled-in field green - a state the design does not have. */
.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--sl-grey-700);
}

.woocommerce form .form-row.woocommerce-validated :is(input.input-text, select, textarea),
.woocommerce
	form
	.form-row.woocommerce-validated
	.select2-container:not(.select2-container--open)
	.select2-selection {
	border-color: var(--sl-grey-300);
}

.woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, textarea),
.woocommerce
	form
	.form-row.woocommerce-invalid
	.select2-container:not(.select2-container--open)
	.select2-selection {
	border-color: var(--sl-danger);
}

.woocommerce .form-row .checkout-inline-error-message {
	margin: 0.25rem 0 0;
	font-family: var(--sl-font-ui);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sl-danger);
}

/* On a consent the message belongs under the sentence, not under the box. */
.woocommerce
	.form-row:has(label.checkbox, label.woocommerce-form__label-for-checkbox)
	.checkout-inline-error-message {
	padding-left: var(--sl-checkbox-indent);
}

.woocommerce form .form-row.woocommerce-invalid :is(input[type="checkbox"], input[type="radio"]) {
	border-color: var(--sl-danger);
}