.pfs-fields {
	display: grid;
	gap: 20px;
	margin-block: 0 24px;
}

.pfs-fields .pfs-group {
    --pfs-gap: var(--pfs-gap-desktop);
    --pfs-padding: var(--pfs-padding-desktop);
    --pfs-radius: var(--pfs-radius-desktop);
    --pfs-font-size: var(--pfs-font-size-desktop);
    --pfs-label-font-size: var(--pfs-label-font-size-desktop);
    --pfs-border-width: var(--pfs-border-width-desktop);
    --pfs-border: var(--pfs-border-desktop);
    --pfs-bg: var(--pfs-bg-desktop);
    --pfs-text: var(--pfs-text-desktop);
    --pfs-accent: var(--pfs-accent-desktop);
    --pfs-font: var(--pfs-font-desktop);
    --pfs-input-border-width: var(--pfs-input-border-width-desktop);
    --pfs-input-border: var(--pfs-input-border-desktop);
    --pfs-input-radius: var(--pfs-input-radius-desktop);
    --pfs-input-bg: var(--pfs-input-bg-desktop);
    --pfs-input-text: var(--pfs-input-text-desktop);
    --pfs-button-gap: var(--pfs-button-gap-desktop);
    --pfs-button-padding-x: var(--pfs-button-padding-x-desktop);
    --pfs-button-padding-y: var(--pfs-button-padding-y-desktop);
    --pfs-button-radius: var(--pfs-button-radius-desktop);
    --pfs-button-font-size: var(--pfs-button-font-size-desktop);
    --pfs-button-border-width: var(--pfs-button-border-width-desktop);
    --pfs-button-border: var(--pfs-button-border-desktop);
    --pfs-button-bg: var(--pfs-button-bg-desktop);
    --pfs-button-text: var(--pfs-button-text-desktop);
    --pfs-button-hover-bg: var(--pfs-button-hover-bg-desktop);
    --pfs-button-hover-text: var(--pfs-button-hover-text-desktop);
    --pfs-button-hover-border: var(--pfs-button-hover-border-desktop);
    --pfs-button-selected-bg: var(--pfs-button-selected-bg-desktop);
    --pfs-button-selected-text: var(--pfs-button-selected-text-desktop);
    --pfs-button-selected-border: var(--pfs-button-selected-border-desktop);
    --pfs-button-pressed-bg: var(--pfs-button-pressed-bg-desktop);
    --pfs-button-pressed-text: var(--pfs-button-pressed-text-desktop);
    --pfs-button-pressed-border: var(--pfs-button-pressed-border-desktop);
    box-sizing: border-box;
    color: var(--pfs-text);
    font-family: var(--pfs-font);
    font-size: var(--pfs-font-size);
}

.pfs-fields .pfs-group__heading {
	margin-block-end: 12px;
}

.pfs-fields .pfs-group__heading h2 {
	color: inherit;
	font: inherit;
	font-size: 1.15em;
	font-weight: 650;
	line-height: 1.3;
	margin: 0;
}

.pfs-fields .pfs-group__heading p,
.pfs-fields .pfs-field__help {
	color: color-mix(in srgb, var(--pfs-text) 72%, transparent);
	line-height: 1.45;
	margin: 4px 0 0;
}

.pfs-fields .pfs-group__grid {
	display: grid;
	grid-template-columns: repeat(var(--pfs-cols-desktop), minmax(0, 1fr));
	gap: var(--pfs-gap);
}

.pfs-fields .pfs-field {
    --pfs-field-border: var(--pfs-field-border-desktop, var(--pfs-border));
    --pfs-field-bg: var(--pfs-field-bg-desktop, var(--pfs-bg));
    --pfs-field-text: var(--pfs-field-text-desktop, var(--pfs-text));
    --pfs-field-radius: var(--pfs-field-radius-desktop, var(--pfs-radius));
    --pfs-field-font-size: var(--pfs-field-font-size-desktop, inherit);
    --pfs-field-label-font-size: var(--pfs-field-label-font-size-desktop, var(--pfs-label-font-size));
    --pfs-field-input-border-width: var(--pfs-field-input-border-width-desktop, var(--pfs-input-border-width));
    --pfs-field-input-border: var(--pfs-field-input-border-desktop, var(--pfs-input-border));
    --pfs-field-input-radius: var(--pfs-field-input-radius-desktop, var(--pfs-input-radius));
    --pfs-field-input-bg: var(--pfs-field-input-bg-desktop, var(--pfs-input-bg));
    --pfs-field-input-text: var(--pfs-field-input-text-desktop, var(--pfs-input-text));
    background: var(--pfs-field-bg);
    border: var(--pfs-border-width) solid var(--pfs-field-border);
    border-radius: var(--pfs-field-radius);
    box-sizing: border-box;
    color: var(--pfs-field-text);
    font-size: var(--pfs-field-font-size);
	grid-column: span min(var(--pfs-span), var(--pfs-cols-desktop));
	min-inline-size: 0;
	padding: var(--pfs-padding);
}

.pfs-fields .pfs-group--table .pfs-group__grid {
	gap: 0;
	border-block-start: var(--pfs-border-width) solid var(--pfs-border);
	border-inline-start: var(--pfs-border-width) solid var(--pfs-border);
}

.pfs-fields .pfs-group--table .pfs-field {
	border-block-start: 0;
	border-inline-start: 0;
	border-radius: 0;
}

.pfs-fields .pfs-field[hidden] {
	display: none;
}

.pfs-fields .pfs-field fieldset {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.pfs-fields .pfs-field__label {
    color: inherit !important;
    display: block;
    float: none;
    font-family: inherit !important;
    font-size: var(--pfs-field-label-font-size, var(--pfs-label-font-size, inherit)) !important;
    font-weight: 600;
    inline-size: 100%;
    line-height: 1.35;
    margin-block-end: 6px;
    padding: 0;
    text-align: start !important;
}

.pfs-fields .pfs-required {
	color: var(--pfs-accent);
}

.pfs-fields input[type="text"],
.pfs-fields input[type="number"],
.pfs-fields textarea,
.pfs-fields select {
	appearance: auto;
    background-color: var(--pfs-field-input-bg, var(--pfs-input-bg, #fff)) !important;
    border: var(--pfs-field-input-border-width, var(--pfs-input-border-width, 1px)) solid var(--pfs-field-input-border, var(--pfs-input-border, var(--pfs-field-border, var(--pfs-border)))) !important;
    border-radius: var(--pfs-field-input-radius, var(--pfs-input-radius, max(2px, calc(var(--pfs-field-radius, var(--pfs-radius)) / 2)))) !important;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--pfs-field-input-text, var(--pfs-input-text, var(--pfs-field-text, var(--pfs-text)))) !important;
    font: inherit !important;
	inline-size: 100%;
	line-height: 1.35;
	min-block-size: 40px;
	padding: 8px 10px;
}

.pfs-fields textarea {
	min-block-size: 96px;
	resize: vertical;
}

.pfs-fields input:focus-visible,
.pfs-fields textarea:focus-visible,
.pfs-fields select:focus-visible {
    background-color: color-mix(in srgb, var(--pfs-accent) 7%, #fff) !important;
    border-color: var(--pfs-accent) !important;
    color: var(--pfs-text) !important;
	outline: 0;
}

.pfs-fields .pfs-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.pfs-fields .pfs-choice {
	align-items: center;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	gap: 7px;
	line-height: 1.35;
	min-block-size: 32px;
}

.pfs-fields .pfs-choice input {
	accent-color: var(--pfs-accent);
	block-size: 18px;
	inline-size: 18px;
	margin: 0;
}

.pfs-fields .pfs-choice input:focus-visible {
	outline: 0;
}

.pfs-fields .pfs-choice:has(input:focus-visible) {
	background: color-mix(in srgb, var(--pfs-accent) 9%, transparent);
	color: var(--pfs-accent);
}

@media (max-width: 900px) {
	.pfs-fields .pfs-group__grid {
		grid-template-columns: repeat(var(--pfs-cols-tablet), minmax(0, 1fr));
	}

	.pfs-fields .pfs-field {
		grid-column: span min(var(--pfs-span), var(--pfs-cols-tablet));
	}
}

@media (max-width: 600px) {
	.pfs-fields .pfs-group__grid {
		grid-template-columns: repeat(var(--pfs-cols-mobile), minmax(0, 1fr));
	}

	.pfs-fields .pfs-field {
		grid-column: span min(var(--pfs-span), var(--pfs-cols-mobile));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfs-fields *,
	.pfs-fields *::before,
	.pfs-fields *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.pfs-fields input[type="checkbox"], .pfs-fields input[type="radio"] {
    appearance: none;
    background: var(--pfs-field-input-bg, var(--pfs-input-bg, #fff));
    border: var(--pfs-field-input-border-width, var(--pfs-input-border-width, 1px)) solid var(--pfs-field-input-border, var(--pfs-input-border, var(--pfs-border)));
    border-radius: 4px;
    box-shadow: none;
    display: inline-grid;
    place-content: center;
    block-size: 18px;
    inline-size: 18px;
    min-block-size: 18px;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.pfs-fields input[type="radio"] { border-radius: 50%; }
.pfs-fields input[type="checkbox"]::before, .pfs-fields input[type="radio"]::before {
    content: "";
    background: #fff;
    block-size: 10px;
    inline-size: 10px;
    margin: 0;
    transform: scale(0);
    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 84% 6%, 38% 70%);
}
.pfs-fields input[type="radio"]::before { clip-path: none; border-radius: 50%; block-size: 8px; inline-size: 8px; }
.pfs-fields input[type="checkbox"]:checked, .pfs-fields input[type="radio"]:checked { background: var(--pfs-accent); border-color: var(--pfs-accent); }
.pfs-fields input[type="checkbox"]:checked::before, .pfs-fields input[type="radio"]:checked::before { transform: scale(1); }
.pfs-fields :is(input, select, textarea):hover:not(:disabled) { border-color: var(--pfs-accent) !important; }
.pfs-fields :is(input, select, textarea):focus { outline: 0; box-shadow: none; }
.pfs-fields :is(input, select, textarea):focus-visible { border-color: var(--pfs-accent) !important; background-color: color-mix(in srgb, var(--pfs-accent) 12%, #fff) !important; }
.pfs-fields :is(input[type="checkbox"], input[type="radio"]):checked:focus-visible { background: var(--pfs-accent); border-color: currentColor !important; }
.pfs-fields :is(.pfs-choice, .pfs-check-row):has(input:focus-visible) { background: color-mix(in srgb, var(--pfs-accent) 12%, #fff); color: var(--pfs-accent); }
.pfs-fields :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
.pfs-fields :is(input, select, textarea):user-invalid { border-color: #a63d4c !important; background-color: #fff0f1 !important; }

.pfs-fields .pfs-group__heading p, .pfs-fields .pfs-field__help { white-space: pre-line; overflow-wrap: anywhere; }
.pfs-fields .pfs-field__label, .pfs-fields .pfs-choice span { overflow-wrap: anywhere; }
.pfs-fields .pfs-choice { min-block-size: 40px; }
.pfs-fields select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 30px; }
[dir="rtl"] .pfs-fields select { background-position: 15px 18px, 20px 18px; }
/* Standalone groups retain field labels and controls without a surrounding heading/table. */
.pfs-fields .pfs-group--standalone .pfs-group__heading { display: none; }
.pfs-fields .pfs-group--standalone .pfs-field {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* Keep the real label associated with the select without taking up layout space. */
.pfs-fields .pfs-field__label.pfs-field__label--hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Button-choice fields retain native radio state while presenting compact size pills. */
.pfs-fields .pfs-field--button_group .pfs-field__choices {
    gap: var(--pfs-button-gap, 12px);
    justify-content: flex-start;
    text-align: start;
}
.pfs-fields .pfs-choice--button {
    min-block-size: 0;
    position: relative;
}
.pfs-fields .pfs-choice--button input[type="radio"] {
    block-size: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: 1px;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.pfs-fields .pfs-choice--button span {
    align-items: center;
    background-color: var(--pfs-button-bg, transparent) !important;
    border: var(--pfs-button-border-width, 1px) solid var(--pfs-button-border, #d9dfe5) !important;
    border-radius: var(--pfs-button-radius, 999px) !important;
    box-sizing: border-box;
    color: var(--pfs-button-text, inherit) !important;
    display: inline-flex;
    font-size: var(--pfs-button-font-size, inherit);
    justify-content: center;
    line-height: 1.25;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: var(--pfs-button-padding-y, 10px) var(--pfs-button-padding-x, 16px);
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.pfs-fields .pfs-choice--button:hover:not(:has(input:checked)) span {
    background-color: var(--pfs-button-hover-bg, var(--pfs-button-bg, transparent)) !important;
    border-color: var(--pfs-button-hover-border, var(--pfs-accent)) !important;
    color: var(--pfs-button-hover-text, var(--pfs-button-text, inherit)) !important;
}
.pfs-fields .pfs-choice--button input:checked + span {
    background-color: var(--pfs-button-selected-bg, #f7d9df) !important;
    border-color: var(--pfs-button-selected-border, transparent) !important;
    color: var(--pfs-button-selected-text, inherit) !important;
}
.pfs-fields .pfs-field--button_group .pfs-choice--button:active span {
    background-color: var(--pfs-button-pressed-bg, var(--pfs-button-selected-bg, #f7d9df)) !important;
    border-color: var(--pfs-button-pressed-border, var(--pfs-accent)) !important;
    color: var(--pfs-button-pressed-text, var(--pfs-button-selected-text, inherit)) !important;
}
.pfs-fields .pfs-choice--button input:focus-visible + span {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pfs-accent) 32%, transparent);
    outline: 1px solid transparent;
}
.pfs-fields .pfs-choice--button:has(input:focus-visible) {
    background: transparent;
}
.pfs-fields .pfs-choice--button:has(input:disabled) {
    cursor: not-allowed;
    opacity: .6;
}

/* Every visual token can switch at the same storefront breakpoints as the columns. */
@media (max-width: 900px) {
    .pfs-fields .pfs-group {
        --pfs-gap: var(--pfs-gap-tablet);
        --pfs-padding: var(--pfs-padding-tablet);
        --pfs-radius: var(--pfs-radius-tablet);
        --pfs-font-size: var(--pfs-font-size-tablet);
        --pfs-label-font-size: var(--pfs-label-font-size-tablet);
        --pfs-border-width: var(--pfs-border-width-tablet);
        --pfs-border: var(--pfs-border-tablet);
        --pfs-bg: var(--pfs-bg-tablet);
        --pfs-text: var(--pfs-text-tablet);
        --pfs-accent: var(--pfs-accent-tablet);
        --pfs-font: var(--pfs-font-tablet);
        --pfs-input-border-width: var(--pfs-input-border-width-tablet);
        --pfs-input-border: var(--pfs-input-border-tablet);
        --pfs-input-radius: var(--pfs-input-radius-tablet);
        --pfs-input-bg: var(--pfs-input-bg-tablet);
        --pfs-input-text: var(--pfs-input-text-tablet);
        --pfs-button-gap: var(--pfs-button-gap-tablet);
        --pfs-button-padding-x: var(--pfs-button-padding-x-tablet);
        --pfs-button-padding-y: var(--pfs-button-padding-y-tablet);
        --pfs-button-radius: var(--pfs-button-radius-tablet);
        --pfs-button-font-size: var(--pfs-button-font-size-tablet);
        --pfs-button-border-width: var(--pfs-button-border-width-tablet);
        --pfs-button-border: var(--pfs-button-border-tablet);
        --pfs-button-bg: var(--pfs-button-bg-tablet);
        --pfs-button-text: var(--pfs-button-text-tablet);
        --pfs-button-hover-bg: var(--pfs-button-hover-bg-tablet);
        --pfs-button-hover-text: var(--pfs-button-hover-text-tablet);
        --pfs-button-hover-border: var(--pfs-button-hover-border-tablet);
        --pfs-button-selected-bg: var(--pfs-button-selected-bg-tablet);
        --pfs-button-selected-text: var(--pfs-button-selected-text-tablet);
        --pfs-button-selected-border: var(--pfs-button-selected-border-tablet);
        --pfs-button-pressed-bg: var(--pfs-button-pressed-bg-tablet);
        --pfs-button-pressed-text: var(--pfs-button-pressed-text-tablet);
        --pfs-button-pressed-border: var(--pfs-button-pressed-border-tablet);
    }
    .pfs-fields .pfs-field {
        --pfs-field-border: var(--pfs-field-border-tablet, var(--pfs-border));
        --pfs-field-bg: var(--pfs-field-bg-tablet, var(--pfs-bg));
        --pfs-field-text: var(--pfs-field-text-tablet, var(--pfs-text));
        --pfs-field-radius: var(--pfs-field-radius-tablet, var(--pfs-radius));
        --pfs-field-font-size: var(--pfs-field-font-size-tablet, inherit);
        --pfs-field-label-font-size: var(--pfs-field-label-font-size-tablet, var(--pfs-label-font-size));
        --pfs-field-input-border-width: var(--pfs-field-input-border-width-tablet, var(--pfs-input-border-width));
        --pfs-field-input-border: var(--pfs-field-input-border-tablet, var(--pfs-input-border));
        --pfs-field-input-radius: var(--pfs-field-input-radius-tablet, var(--pfs-input-radius));
        --pfs-field-input-bg: var(--pfs-field-input-bg-tablet, var(--pfs-input-bg));
        --pfs-field-input-text: var(--pfs-field-input-text-tablet, var(--pfs-input-text));
    }
}
@media (max-width: 600px) {
    .pfs-fields .pfs-group {
        --pfs-gap: var(--pfs-gap-mobile);
        --pfs-padding: var(--pfs-padding-mobile);
        --pfs-radius: var(--pfs-radius-mobile);
        --pfs-font-size: var(--pfs-font-size-mobile);
        --pfs-label-font-size: var(--pfs-label-font-size-mobile);
        --pfs-border-width: var(--pfs-border-width-mobile);
        --pfs-border: var(--pfs-border-mobile);
        --pfs-bg: var(--pfs-bg-mobile);
        --pfs-text: var(--pfs-text-mobile);
        --pfs-accent: var(--pfs-accent-mobile);
        --pfs-font: var(--pfs-font-mobile);
        --pfs-input-border-width: var(--pfs-input-border-width-mobile);
        --pfs-input-border: var(--pfs-input-border-mobile);
        --pfs-input-radius: var(--pfs-input-radius-mobile);
        --pfs-input-bg: var(--pfs-input-bg-mobile);
        --pfs-input-text: var(--pfs-input-text-mobile);
        --pfs-button-gap: var(--pfs-button-gap-mobile);
        --pfs-button-padding-x: var(--pfs-button-padding-x-mobile);
        --pfs-button-padding-y: var(--pfs-button-padding-y-mobile);
        --pfs-button-radius: var(--pfs-button-radius-mobile);
        --pfs-button-font-size: var(--pfs-button-font-size-mobile);
        --pfs-button-border-width: var(--pfs-button-border-width-mobile);
        --pfs-button-border: var(--pfs-button-border-mobile);
        --pfs-button-bg: var(--pfs-button-bg-mobile);
        --pfs-button-text: var(--pfs-button-text-mobile);
        --pfs-button-hover-bg: var(--pfs-button-hover-bg-mobile);
        --pfs-button-hover-text: var(--pfs-button-hover-text-mobile);
        --pfs-button-hover-border: var(--pfs-button-hover-border-mobile);
        --pfs-button-selected-bg: var(--pfs-button-selected-bg-mobile);
        --pfs-button-selected-text: var(--pfs-button-selected-text-mobile);
        --pfs-button-selected-border: var(--pfs-button-selected-border-mobile);
        --pfs-button-pressed-bg: var(--pfs-button-pressed-bg-mobile);
        --pfs-button-pressed-text: var(--pfs-button-pressed-text-mobile);
        --pfs-button-pressed-border: var(--pfs-button-pressed-border-mobile);
    }
    .pfs-fields .pfs-field {
        --pfs-field-border: var(--pfs-field-border-mobile, var(--pfs-border));
        --pfs-field-bg: var(--pfs-field-bg-mobile, var(--pfs-bg));
        --pfs-field-text: var(--pfs-field-text-mobile, var(--pfs-text));
        --pfs-field-radius: var(--pfs-field-radius-mobile, var(--pfs-radius));
        --pfs-field-font-size: var(--pfs-field-font-size-mobile, inherit);
        --pfs-field-label-font-size: var(--pfs-field-label-font-size-mobile, var(--pfs-label-font-size));
        --pfs-field-input-border-width: var(--pfs-field-input-border-width-mobile, var(--pfs-input-border-width));
        --pfs-field-input-border: var(--pfs-field-input-border-mobile, var(--pfs-input-border));
        --pfs-field-input-radius: var(--pfs-field-input-radius-mobile, var(--pfs-input-radius));
        --pfs-field-input-bg: var(--pfs-field-input-bg-mobile, var(--pfs-input-bg));
        --pfs-field-input-text: var(--pfs-field-input-text-mobile, var(--pfs-input-text));
    }
}