/**
 * KLOWDZ matching product action buttons.
 *
 * The two supplied PNGs have different transparent margins. Separate
 * background sizing normalizes the visible artwork while every action keeps
 * the exact same 4.25:1 layout footprint.
 */

:root {
	--klowdz-action-ratio: 4.25 / 1;
	--klowdz-action-max-width: 430px;
}

.woocommerce .klowdz-product-action,
.woocommerce a.klowdz-product-action,
.woocommerce button.klowdz-product-action,
.woocommerce .single_add_to_cart_button {
	display: inline-block !important;
	box-sizing: border-box !important;
	width: min(100%, var(--klowdz-action-max-width)) !important;
	max-width: var(--klowdz-action-max-width) !important;
	height: auto !important;
	aspect-ratio: var(--klowdz-action-ratio) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background-color: transparent !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	vertical-align: middle !important;
	overflow: hidden !important;
}

.woocommerce .klowdz-product-action--cart,
.woocommerce .single_add_to_cart_button {
	background-image: url("add-to-cart.png") !important;
	background-size: 106.7% 154.2% !important;
}

.woocommerce .klowdz-product-action--notify {
	background-image: url("notify-available.png") !important;
	background-size: 112% 118.8% !important;
}

.woocommerce .klowdz-product-action:hover,
.woocommerce .single_add_to_cart_button:hover {
	filter: brightness(1.08);
}

.woocommerce .klowdz-product-action:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible {
	outline: 3px solid #00eaff !important;
	outline-offset: 3px !important;
}

.woocommerce .klowdz-product-action:disabled,
.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button.disabled {
	filter: grayscale(.35);
	opacity: .55 !important;
}

.woocommerce ul.products li.product .klowdz-product-action {
	width: 100% !important;
	max-width: 100% !important;
}

.woocommerce .klowdz-back-in-stock form .klowdz-product-action {
	flex: 0 0 min(100%, var(--klowdz-action-max-width));
}

@media (max-width: 480px) {
	:root {
		--klowdz-action-max-width: 100%;
	}
}