/* =========================================================================
   StarFroid — buttons (brief §4)
   primary = filled accent, white bold; secondary = navy outline; ghost = text.
   Tap targets ≥44px. Scoped to .sf-btn and to WooCommerce .button so the
   storefront's CTAs inherit the brand without touching plugin markup.
   ========================================================================= */

.sf-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 0.7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--radius-card);
	font-family: var(--font-body);
	font-size: var(--fs-200);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

/* ---- Primary / accent (Add to cart, main CTAs) ---- */
.sf-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button {
	background: var(--grad-accent);
	color: #fff;
	border: none;
	font-weight: 700;
	box-shadow: var(--shadow-soft);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sf-btn--primary:hover,
.sf-btn--primary:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
	background: var(--grad-accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-raised);
}

/* ---- Secondary (navy outline) — default Woo .button without .alt ---- */
.sf-btn--secondary,
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
	background-color: var(--c-bg);
	color: var(--c-primary);
	border-color: var(--c-primary);
}
.sf-btn--secondary:hover,
.sf-btn--secondary:focus-visible,
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover {
	background: var(--grad-primary);
	color: #fff;
	border: none;
	font-weight: 600;
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* ---- Ghost (text-only navy) ---- */
.sf-btn--ghost {
	background: transparent;
	color: var(--c-primary);
	border-color: transparent;
	min-height: auto;
	padding: var(--space-2) var(--space-3);
}
.sf-btn--ghost:hover { background: var(--c-bg-alt); color: var(--c-primary); }

/* ---- Sizes / modifiers ---- */
.sf-btn--block { display: flex; width: 100%; }
.sf-btn--lg { font-size: var(--fs-300); padding: 0.9rem 1.8rem; }

.sf-btn:disabled,
.sf-btn[aria-disabled="true"],
.woocommerce .button:disabled,
.woocommerce .button.disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* WooCommerce / Astra product buttons → StarFroid accent, so "Add to cart"
   everywhere is orange, not Astra blue. Astra's homepage carousels render
   an `.ast-on-card-button` OUTSIDE the `.woocommerce` wrapper, so we target the
   button classes directly (no `.woocommerce` ancestor required). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.add_to_cart_button,
.ast-on-card-button.add_to_cart_button,
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
a.added_to_cart {
	background: var(--c-accent) !important;
	color: #fff !important;
	border: 0;
	border-radius: var(--radius-card);
	font-weight: 600;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
a.add_to_cart_button:hover,
.ast-on-card-button.add_to_cart_button:hover,
ul.products li.product a.button:hover,
a.added_to_cart:hover { background: var(--c-accent-700) !important; color: #fff !important; }