/**
 * Catalog search, product options and quantity controls.
 */

.myc-product-purchase .variations select:not(.myc-swatches-source),
.myc-native-field-text,
.myc-quantity-control {
	border-color: var(--ps-color-border);
}

/* The size swatches and the product-page quantity stepper take the same
   border as the totals box, so every border in this column reads as one
   family rather than two. The cart drawer's own stepper (.myc-quantity-control,
   above) is a different surface and keeps the general border. */
.myc-product-quantity-control,
.myc-variation-swatch {
	border-color: var(--ps-color-summary-border);
}

/*
 * base.css clears the native tap flash for buttons and links, which leaves the
 * one control here that is neither: Safari greyed the whole name-and-number
 * field for an instant on every tap, over a field that shows its own focus.
 */
.myc-native-field-text {
	-webkit-tap-highlight-color: transparent;
}

/*
 * Guarded for the same reason the personalisation options are: a finger never
 * moves away, so iOS keeps :hover on whatever it last slid over and leaves a
 * field, a size or a variation looking picked when nothing was.
 */
@media (hover: hover) {
	.myc-product-purchase .variations select:not(.myc-swatches-source):hover,
	.myc-native-field-text:hover,
	.myc-variation-swatch:hover:not(:disabled) {
		border-color: var(--ps-color-brand-600);
	}
}

.myc-product-purchase .variations select:not(.myc-swatches-source):focus-visible,
.myc-native-field-text:focus-visible,
.myc-variation-swatch:focus-visible {
	border-color: var(--ps-color-brand-600);
	box-shadow: var(--ps-shadow-focus);
	outline: none;
}

.myc-native-field h3 {
	border-left: 3px solid var(--ps-color-brand-600);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-brand-50);
}

.myc-native-field h3 span {
	color: var(--ps-color-danger);
}

.myc-native-field-text:focus {
	border-color: var(--ps-color-brand-600);
	box-shadow: var(--ps-shadow-focus);
}

.myc-native-field-option input {
	accent-color: var(--ps-color-brand-600);
}

.myc-variation-swatch.is-selected {
	border-color: var(--ps-color-brand-600);
	background: var(--ps-color-brand-600);
	box-shadow: 0 12px 26px rgb(143 31 46 / 20%);
}

.myc-variation-swatch:disabled {
	border-color: var(--ps-color-border);
	background: var(--ps-color-surface-muted);
	color: var(--ps-color-disabled);
}

.myc-product-quantity-control button:active:not(:disabled),
.myc-quantity-control button:active:not(:disabled) {
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
}

.myc-field-error {
	margin-top: 6px;
	color: var(--ps-color-danger);
	font-size: 13px;
	font-weight: 700;
}

.myc-field-has-error :is(input, select, textarea) {
	border-color: var(--ps-color-danger) !important;
}