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

.myc-product-purchase .variations select:not(.myc-swatches-source),
.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);
}

/*
 * Guarded because a finger never moves away: iOS keeps :hover on whatever it
 * last slid over and leaves a size or a variation looking picked when nothing
 * was.
 */
@media (hover: hover) and (pointer: fine) {
	.myc-product-purchase .variations select:not(.myc-swatches-source):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-variation-swatch:focus-visible {
	border-color: var(--ps-color-brand-600);
	box-shadow: var(--ps-shadow-focus);
	outline: none;
}

.myc-variation-swatch.is-selected {
	border-color: var(--ps-color-brand-600);
	background: var(--ps-color-brand-600);
	box-shadow: 0 12px 26px rgb(28 53 87 / 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;
}

/*
 * Dos toques seguidos sobre las tallas no amplían la página.
 *
 * Safari en iPhone, y algunos navegadores Android, leen un segundo toque
 * rápido como «doble toque para ampliar» aunque el viewport sea
 * `width=device-width`: quien cambia de talla con prisa se encontraba la ficha
 * ampliada. `manipulation` quita solo ese gesto; pellizcar para ampliar sigue
 * funcionando, que es lo que necesita quien ve mal. Va también en el grupo para
 * que un toque que cae entre dos tallas no lo dispare.
 *
 * Y en los botones de cantidad de la ficha y del carrito, que es donde más se
 * toca dos veces seguidas: pulsar «+» dos veces para llevar dos pares.
 */
.myc-variation-swatches,
.myc-variation-swatch,
.myc-product-quantity-control,
.myc-product-quantity-control button,
.myc-quantity-control,
.myc-quantity-control button {
	touch-action: manipulation;
}

/*
 * WooCommerce's password strength meter, on every form that sets a password:
 * registration, account details and the reset link.
 *
 * Out of the box it is a flat pastel band glued to the bottom of the field.
 * Here it is a small status card set apart from the input: a four-step bar that
 * fills with the score, the verdict in the theme's own status colours, and the
 * hint underneath as plain help text.
 *
 * `body` lifts these over woocommerce.css, which can load after the theme.
 * WooCommerce hides the card itself while the field is empty.
 */
body .woocommerce-password-strength {
	--ps-password-level: 0%;
	--ps-password-tone: var(--ps-color-text-muted);
	margin-top: 10px;
	padding: 10px 12px 11px;
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-surface-subtle);
	color: var(--ps-password-tone);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

body .woocommerce-password-strength:empty {
	display: none;
}

/*
 * Four segments, filled up to the score. A block of its own rather than a grid
 * row: WooCommerce shows the card with jQuery, which writes `display: block`
 * inline and would leave a grid-dependent bar as an inline box with no height.
 */
body .woocommerce-password-strength::before {
	display: block;
	height: 4px;
	margin-bottom: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ps-password-tone) var(--ps-password-level), rgb(23 19 21 / 9%) var(--ps-password-level));
	content: "";
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 3px), transparent calc(25% - 3px) 25%);
	mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 3px), transparent calc(25% - 3px) 25%);
}

body .woocommerce-password-strength.short {
	--ps-password-level: 25%;
	--ps-password-tone: var(--ps-color-danger);
	border-color: rgb(195 50 50 / 22%);
	background: var(--ps-color-danger-soft);
}

body .woocommerce-password-strength.bad {
	--ps-password-level: 50%;
	--ps-password-tone: #b4540b;
	border-color: rgb(180 84 11 / 22%);
	background: #fff8f1;
}

body .woocommerce-password-strength.good {
	--ps-password-level: 75%;
	--ps-password-tone: var(--ps-color-warning);
	border-color: rgb(161 92 0 / 20%);
	background: #fffbeb;
}

body .woocommerce-password-strength.strong {
	--ps-password-level: 100%;
	--ps-password-tone: var(--ps-color-success);
	border-color: rgb(24 121 78 / 22%);
	background: #f0faf4;
}

body .woocommerce-password-hint {
	display: block;
	margin: 8px 0 0;
	color: var(--ps-color-text-muted);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}