/*
 * Product Field Kit storefront UI v2.
 *
 * This layer is loaded after the generated field-design stylesheet. It adds
 * interaction, accessibility, responsive, and summary polish without replacing
 * merchant-configured colors, radii, typography, or field dimensions.
 */

.pfk {
	--pfk-front-accent: var(--apf-card-border-color-sel, var(--apf-input-border-color-foc, #2271b1));
	--pfk-front-danger: var(--apf-error-color, #b42318);
	--pfk-front-success: #237642;
	--pfk-front-border: rgba(34, 40, 49, .14);
	--pfk-front-border-soft: rgba(34, 40, 49, .09);
	--pfk-front-muted: rgba(34, 40, 49, .68);
	--pfk-front-surface: var(--apf-input-bg, #fff);
	--pfk-front-radius: max(var(--apf-radius, 6px), 6px);
}

.pfk .pfk-wrapper,
.pfk .pfk-field-group,
.pfk .pfk-section,
.pfk .pfk-field-container,
.pfk .pfk-field-input {
	min-width: 0;
}

.pfk .pfk-field-label {
	align-items: center;
	column-gap: 6px;
	flex-wrap: wrap;
	line-height: 1.4;
}

.pfk .pfk-field-description {
	line-height: 1.55;
	opacity: .72;
}

.pfk .pfk-pricing-hint {
	font-size: .88em;
	line-height: 1.35;
}

.pfk :where(input.pfk-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select.pfk-input, textarea.pfk-input):focus-visible {
	outline: 2px solid var(--pfk-front-accent);
	outline-offset: 2px;
}

.pfk :where(.pfk-card, .pfk-swatch):focus-within {
	outline: 2px solid var(--pfk-front-accent);
	outline-offset: 3px;
}

.pfk :where(.pfk-checkbox, .pfk-radio, .pfk-switch) input:focus-visible + .pfk-custom {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pfk-front-accent) 24%, transparent);
	outline: 1px solid var(--pfk-front-accent);
	outline-offset: 1px;
}

.pfk .pfk-card,
.pfk .pfk-swatch,
.pfk .pfk-custom,
.pfk .apf-plusmin,
.pfk .dzone {
	transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}

.pfk .pfk-card:not(.is-qty-select):active,
.pfk .pfk-swatch:active {
	transform: scale(.99);
}

.pfk .pfk-disabled {
	cursor: not-allowed;
	filter: grayscale(.18);
}

.pfk .pfk-disabled :where(label, input, button) {
	cursor: not-allowed;
}

.pfk .apf-plusmin:focus-within {
	box-shadow: 0 0 0 2px var(--pfk-front-accent);
	outline: 1px solid transparent;
}

.pfk .apf-plusmin button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-width: 38px;
	touch-action: manipulation;
}

.pfk .apf-plusmin button:focus-visible {
	box-shadow: inset 0 0 0 2px var(--pfk-front-accent);
	outline: 0;
}

.pfk .dzone {
	align-items: center;
	border: 1px dashed color-mix(in srgb, var(--pfk-front-accent) 42%, var(--pfk-front-border));
	border-radius: var(--pfk-front-radius);
	display: flex;
	justify-content: center;
	min-height: 92px;
	padding: 16px;
	touch-action: manipulation;
}

.pfk .dzone:hover,
.pfk .dzone:focus-visible,
.pfk .dzone.dz-drag-hover {
	background: color-mix(in srgb, var(--pfk-front-accent) 5%, transparent);
	border-color: var(--pfk-front-accent);
}

.pfk .dzone:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pfk-front-accent) 20%, transparent);
	outline: 0;
}

.pfk .dzone[aria-invalid="true"] {
	background: color-mix(in srgb, var(--apf-error-color, #be2626) 5%, transparent);
	border-color: var(--apf-error-color, #be2626);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--apf-error-color, #be2626) 14%, transparent);
}

.pfk .pfk-dz-required-error:not([hidden]) {
	display: block;
	font-size: .9em;
	line-height: 1.45;
	margin-top: 8px;
}

.pfk .dzone .dz-message {
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.pfk .dzone .dz-message span {
	color: var(--pfk-front-accent);
	font-weight: 650;
}

.pfk .dz-preview {
	border: 1px solid var(--pfk-front-border-soft);
	border-radius: var(--pfk-front-radius);
	box-sizing: border-box;
}

.pfk button.dz-remove {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	width: 32px;
}

.pfk button.dz-remove:hover,
.pfk button.dz-remove:focus-visible {
	background: rgba(180, 35, 24, .08);
	color: var(--pfk-front-danger);
	outline: 2px solid var(--pfk-front-danger);
	outline-offset: 1px;
}

.pfk-product-totals .pfk-product-totals__inner {
	background: var(--pfk-front-surface, #fff);
	border: 1px solid var(--pfk-front-border, rgba(34, 40, 49, .14));
	border-radius: var(--pfk-front-radius, 6px);
	box-shadow: 0 4px 16px rgba(34, 40, 49, .045);
	box-sizing: border-box;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 5px 14px;
}

.pfk-product-totals .pfk-product-totals__row {
	align-items: baseline;
	border-bottom: 1px solid var(--pfk-front-border-soft, rgba(34, 40, 49, .09));
	clear: none;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 10px 0;
}

.pfk-product-totals .pfk-product-totals__row:last-child {
	border-bottom: 0;
}

.pfk-product-totals .pfk-product-totals__row--grand {
	font-size: 1.05em;
	font-weight: 700;
}

.pfk-product-totals .pfk-product-totals__label,
.pfk-product-totals .pfk-product-totals__value {
	float: none;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pfk-product-totals .pfk-product-totals__value {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

@media (max-width: 720px) {
	.pfk .pfk-field-group > .pfk-field-container.has-width,
	.pfk .pfk-section > .pfk-field-container.has-width {
		flex-basis: 100%;
		max-width: 100%;
	}

	.pfk .pfk-card-wrap,
	.pfk .pfk-image-swatch-wrapper {
		max-width: 100%;
	}

	.pfk-product-totals .pfk-product-totals__row {
		gap: 10px;
	}
}

@media (max-width: 420px) {
	.pfk-product-totals .pfk-product-totals__row {
		align-items: flex-start;
		gap: 3px;
		grid-template-columns: 1fr;
	}

	.pfk-product-totals .pfk-product-totals__value {
		text-align: left;
	}
}

@media (hover: none), (pointer: coarse) {
	.pfk :where(.pfk-swatch--text label, .pfk-checkbox label, .pfk-radio label) {
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
	}

	.pfk .apf-plusmin button,
	.pfk button.dz-remove {
		min-height: 44px;
		min-width: 44px;
	}

	.pfk .pfk-card:not(.is-qty-select):active,
	.pfk .pfk-swatch:active {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.pfk :where(.pfk-card, .pfk-swatch):focus-within,
	.pfk .dzone:focus-visible,
	.pfk :where(input, select, textarea, button):focus-visible {
		outline-width: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pfk .pfk-card,
	.pfk .pfk-swatch,
	.pfk .pfk-custom,
	.pfk .apf-plusmin,
	.pfk .dzone {
		transition: none;
	}
}