/**
 * Apply Haystack's global pill-button treatment to WooCommerce controls.
 *
 * WooCommerce loads its component rules after the theme's base button rules,
 * so commerce buttons need a scoped bridge back to the site design system.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page #respond input#submit {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 16px !important;
	border: 1px solid #000 !important;
	border-radius: 48px !important;
	background: transparent !important;
	box-shadow: none;
	color: #000 !important;
	font-family: "Area Normal", sans-serif;
	font-size: 12px !important;
	font-weight: 900 !important;
	line-height: 14px !important;
	letter-spacing: .15em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce a.button:active,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce button.button:active,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce input.button:active,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce #respond input#submit:active,
body.woocommerce-page a.button:hover,
body.woocommerce-page a.button:focus,
body.woocommerce-page a.button:active,
body.woocommerce-page button.button:hover,
body.woocommerce-page button.button:focus,
body.woocommerce-page button.button:active,
body.woocommerce-page input.button:hover,
body.woocommerce-page input.button:focus,
body.woocommerce-page input.button:active,
body.woocommerce-page #respond input#submit:hover,
body.woocommerce-page #respond input#submit:focus,
body.woocommerce-page #respond input#submit:active {
	border-color: #000 !important;
	background: #000 !important;
	box-shadow: none;
	color: #fff !important;
	outline: none;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {