/**
 * WooCommerce & Divi Button Styles
 * Responsive, accessible typography with fluid scaling.
 */

:root {
	--afp-btn-primary: #ff8057;
	--afp-btn-primary-hover: #e8724a;
	--afp-btn-primary-active: #d6653f;
	--afp-btn-font-size: clamp(0.8125rem, 1.5vw + 0.5rem, 1rem);
	--afp-btn-padding-y: clamp(0.5rem, 1vw + 0.3rem, 0.75rem);
	--afp-btn-padding-x: clamp(1rem, 2vw + 0.5rem, 1.5rem);
	--afp-btn-gap: clamp(0.5rem, 1vw, 0.625rem);
	--afp-btn-radius: 0.375rem;
	--afp-btn-transition: 0.2s ease;
}

/* WooCommerce buttons */
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce-page button.button.alt,
.woocommerce-page button.button.alt.disabled,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page #content input.button,
.woocommerce-message a.button.wc-forward,
body .et_pb_button {
	--afp-btn-fs: var(--afp-btn-font-size);
	background-color: var(--afp-btn-primary);
	border: 0;
	border-color: transparent;
	border-radius: var(--afp-btn-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	color: #fff;
	font-size: var(--afp-btn-fs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0 var(--afp-btn-gap) 0 0;
	padding: var(--afp-btn-padding-y) var(--afp-btn-padding-x);
	text-decoration: none;
	transition: background-color var(--afp-btn-transition),
		box-shadow var(--afp-btn-transition),
		transform var(--afp-btn-transition);
}

/* Last button in group – no right margin */
.woocommerce .button:last-child,
.woocommerce-page .button:last-child,
.woocommerce .buttons .button:last-child,
.woocommerce-page .buttons .button:last-child {
	margin-right: 0;
}

/* Hover */
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button.alt:hover:not(.disabled),
.woocommerce-page button.button.alt:hover:not(.disabled),
.woocommerce input.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce #content input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover:not(.disabled),
.woocommerce-page button.button:hover:not(.disabled),
.woocommerce input.button:hover,
.woocommerce-page input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce #content input.button:hover,
.woocommerce-page #content input.button:hover,
.woocommerce-message a.button.wc-forward:hover,
body .et_pb_button:hover {
	background-color: var(--afp-btn-primary-hover);
	box-shadow: 0 2px 6px rgba(255, 128, 87, 0.35);
	color: #fff;
}

/* Focus – accessibility */
.woocommerce a.button.alt:focus,
.woocommerce-page a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce-page button.button.alt:focus,
.woocommerce input.button.alt:focus,
.woocommerce-page input.button.alt:focus,
.woocommerce #respond input#submit.alt:focus,
.woocommerce-page #respond input#submit.alt:focus,
.woocommerce #content input.button.alt:focus,
.woocommerce-page #content input.button.alt:focus,
.woocommerce a.button:focus,
.woocommerce-page a.button:focus,
.woocommerce button.button:focus,
.woocommerce-page button.button:focus,
.woocommerce input.button:focus,
.woocommerce-page input.button:focus,
.woocommerce #respond input#submit:focus,
.woocommerce-page #respond input#submit:focus,
.woocommerce #content input.button:focus,
.woocommerce-page #content input.button:focus,
body .et_pb_button:focus {
	outline: 2px solid var(--afp-btn-primary);
	outline-offset: 2px;
}

/* Active */
.woocommerce a.button.alt:active,
.woocommerce-page a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce-page button.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce-page input.button.alt:active,
.woocommerce #respond input#submit.alt:active,
.woocommerce-page #respond input#submit.alt:active,
.woocommerce #content input.button.alt:active,
.woocommerce-page #content input.button.alt:active,
.woocommerce a.button:active,
.woocommerce-page a.button:active,
.woocommerce button.button:active,
.woocommerce-page button.button:active,
.woocommerce input.button:active,
.woocommerce-page input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce-page #respond input#submit:active,
.woocommerce #content input.button:active,
.woocommerce-page #content input.button:active,
body .et_pb_button:active {
	background-color: var(--afp-btn-primary-active);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}