/*
 * Buttons.
 *
 * Reference: work/pic7/pic9.jpeg. One solid ink block for the action that matters, an outlined
 * twin beside it for anything secondary. Square corners, uppercase, letter-spaced, small.
 */

.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--akem-control-height);
	height: var(--akem-control-height);
	padding: 0 var(--akem-space-5);
	font-size: var(--akem-size-micro);
	font-weight: 600;
	letter-spacing: var(--akem-tracking-wide);
	text-transform: uppercase;
	color: var(--akem-surface);
	background: var(--akem-ink);
	border: 1px solid var(--akem-ink);
	border-radius: 0;
	transition: background 0.18s ease, color 0.18s ease;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	color: var(--akem-surface);
	background: var(--akem-blue);
	border-color: var(--akem-blue);
}

/* The add-to-cart block fills the information column, as in the reference. */
.woocommerce div.product form.cart {
	margin: 0 0 var(--akem-space-3);
}

.woocommerce div.product form.cart .button {
	width: 100%;
}

/* The quantity stepper is Blocksy's own control - minus, field, plus - so its internals are left
   alone. Only the outer height is set, because in the reference the field and the button are one
   continuous band and any difference in height is the first thing the eye catches. */
.woocommerce div.product form.cart div.quantity {
	height: var(--akem-control-height);
	margin: 0;
}

.woocommerce div.product form.cart div.quantity .qty,
.woocommerce div.product form.cart div.quantity input[type="number"] {
	height: 100%;
}

/* The brief's order: strength, then quantity on its own line at the same left edge, then the CTA
   at full usable width beneath. That is what gives the quantity pill and the button one left edge
   and one height, which is the alignment the brief calls non-negotiable. */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--akem-space-3);
}

.woocommerce div.product form.cart .single_variation_wrap {
	width: 100%;
}

.woocommerce div.product form.cart .ct-cart-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--akem-space-3);
	width: 100%;
}

.woocommerce div.product form.cart .ct-cart-actions .quantity {
	align-self: flex-start;
	width: auto;
	min-width: 8rem;
}

.woocommerce div.product form.cart .ct-cart-actions .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	width: 100%;
}

/* Secondary: same shape, outlined. */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--akem-control-height);
	height: var(--akem-control-height);
	padding: 0 var(--akem-space-4);
	font-size: var(--akem-size-micro);
	font-weight: 600;
	letter-spacing: var(--akem-tracking-wide);
	text-transform: uppercase;
	color: var(--akem-ink);
	background: transparent;
	border: 1px solid var(--akem-line);
	border-radius: 0;
}

.woocommerce .button:not(.alt):not(.single_add_to_cart_button):hover {
	color: var(--akem-ink);
	background: transparent;
	border-color: var(--akem-ink);
}