/**
 * Single-product add-to-cart button.
 *
 * The one button on the site that has to look deliberate. Loads on single-product only.
 *
 * Restraint is the point: this is a transactional surface, so the treatment is colour,
 * weight and spacing. No transform on click, no glow, nothing that delays the form
 * submitting or competes with the garment.
 */

.single-product .single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 2.25rem;
	border: 1px solid var(--ad-accent-strong);
	border-radius: 2px;

	background-color: var(--ad-accent-soft);
	color: var(--ad-ground-000);

	font-size: var(--ad-text-sm);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;

	/* Colour only. A transform here would move the target under the cursor mid-click. */
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.single-product .single_add_to_cart_button.button:hover,
.single-product .single_add_to_cart_button.button:focus-visible {
	background-color: var(--ad-text-strong);
	border-color: var(--ad-text-strong);
	color: var(--ad-ground-000);
}

/*
 * Focus ring on the ground colour, not the button colour — the button is light, so an
 * accent-coloured ring on top of it would be nearly invisible.
 */
.single-product .single_add_to_cart_button.button:focus-visible {
	outline: 2px solid var(--ad-focus);
	outline-offset: 3px;
}

/* Woo disables the button while a variation is unselected; say so rather than hint it. */
.single-product .single_add_to_cart_button.button:disabled,
.single-product .single_add_to_cart_button.button.disabled {
	background-color: var(--ad-ground-300);
	border-color: var(--ad-border);
	color: var(--ad-text-muted);
	cursor: not-allowed;
	opacity: 1; /* Woo ships 0.5; the muted palette already reads as disabled */
}

/*
 * FEEDBACK STATES — assets/js/cart-feedback.js.
 *
 * Still colour only. "Adding" is the cursor; "Added" is the accent at full strength for
 * two seconds, which is the button's hover colour's opposite number and reads as the
 * click having landed. The "View cart" link fades in beside the form and stays.
 */
.single-product .single_add_to_cart_button.button.is-adding {
	cursor: progress;
}

.single-product .single_add_to_cart_button.button.is-added,
.single-product .single_add_to_cart_button.button.is-added:hover {
	background-color: var(--ad-accent-strong);
	border-color: var(--ad-accent-strong);
	color: var(--ad-ground-000);
}

.aethyrdancer-added {
	display: inline-block;
	margin: 0.75rem 0 0;
	opacity: 0;
	transition: opacity 260ms ease;
}

.aethyrdancer-added.is-on {
	opacity: 1;
}

/*
 * One rule for both links: the one this theme builds and the `.added_to_cart` one
 * WooCommerce's script appends after the button. WooCommerce ships the latter as a
 * second button; here it is a quiet text link, because the button beside it has just
 * said everything a button needs to.
 */
.aethyrdancer-added a,
.single-product form.cart .added_to_cart {
	display: inline-block;
	margin-left: 0.9rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ad-accent-soft);
	font-family: var(--ad-font-ui, inherit);
	font-size: var(--ad-text-sm);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.aethyrdancer-added a:hover,
.aethyrdancer-added a:focus-visible,
.single-product form.cart .added_to_cart:hover,
.single-product form.cart .added_to_cart:focus-visible {
	background: none;
	color: var(--ad-text-strong);
}

/* Sit the quantity stepper on the same baseline as the taller button. */
.single-product form.cart .quantity input.qty {
	min-height: 52px;
	padding: 0 0.5rem;
	border: 1px solid var(--ad-border);
	border-radius: 2px;
	background-color: var(--ad-surface);
	color: var(--ad-text);
	text-align: center;
}

.single-product form.cart .quantity {
	margin-right: 0.75rem;
}

.aethyrdancer-selected-option {
	display: none;
}

@media (max-width: 921px) {
	body.single-product form.cart .variations select {
		min-height: 48px;
		font-size: 16px;
		letter-spacing: 0;
		color: var(--ad-text-strong);
		text-shadow: none;
	}

	/* Native selects cannot wrap. Keep the complete choice visible below them. */
	body.aethyrdancer-typeface .aethyrdancer-selected-option:not([hidden]) {
		display: block;
		margin: 8px 0;
		font-family: 'Amarante', serif;
		font-size: 16px;
		line-height: 1.5;
		color: var(--ad-text-strong);
		overflow-wrap: anywhere;
	}

	body.aethyrdancer-typeface .single_add_to_cart_button.button {
		font-family: 'Amarante', serif;
		font-size: 16px;
		letter-spacing: 0.03em;
		text-transform: none;
	}

	.single-product form.cart .reset_variations {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .single_add_to_cart_button.button {
		transition: none;
	}
}