/*
 * Button system.
 *
 * One look for every call-to-action: `.sl-btn` + a variant (theme templates), and the same
 * values mapped onto WooCommerce's own buttons below. Shared: inline-flex, centered, 0.5rem gap,
 * 0.5rem radius, 12px/16px bold uppercase text with 0.05em tracking, 1px border (transparent
 * unless the variant draws one, so every variant has the same box), color transitions, 2px
 * var(--sl-black) focus ring 2px out, 1rem icons. Sizes: sm 36px, md (default) 44px, lg 52px (min-height,
 * no vertical padding). Disabled (`:disabled`, `.disabled`, `[aria-disabled="true"]`): 40%
 * opacity, not-allowed cursor, and no hover change — every hover rule excludes those states, so
 * a disabled button keeps its own variant colors (never WooCommerce's purple).
 *
 * Variants: primary (var(--sl-black), hover accent var(--sl-accent)), accent (var(--sl-accent), hover var(--sl-accent-hover)), secondary
 * (white, 1px var(--sl-gray-300) border, hover black border + var(--sl-off-white)), ghost (text only, no padding, hover
 * accent), inverse (white outline for dark bands, hover white fill).
 *
 * `.sl-btn` is printed by this theme's own templates. This sheet loads after the legacy
 * `starlight` (Tailwind) handle, so it keeps precedence over utilities that used to win by
 * living in Tailwind's components layer.
 */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--sl-r-btn);
	background-color: var(--sl-black);
	background-image: none;
	box-shadow: none;
	color: var(--sl-white);
	font-family: inherit;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--sl-duration) ease, background-color var(--sl-duration) ease, border-color var(--sl-duration) ease, transform var(--sl-duration) var(--sl-ease-apple);
}
.sl-btn:active:not(:disabled, .disabled, [aria-disabled="true"]) {
	transform: scale(0.97);
}
.sl-btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.sl-btn:focus-visible {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}
.sl-btn--sm { min-height: 36px; padding: 0 1rem; }
.sl-btn--lg { min-height: 52px; padding: 0 2rem; }
.sl-btn--block { display: flex; width: 100%; }

.sl-btn--primary { background-color: var(--sl-black); border-color: transparent; color: var(--sl-white); }
.sl-btn--primary:hover:not(:disabled, .disabled, [aria-disabled="true"]) { background-color: var(--sl-accent); color: var(--sl-white); }
.sl-btn--accent { background-color: var(--sl-accent); border-color: transparent; color: var(--sl-white); }
.sl-btn--accent:hover:not(:disabled, .disabled, [aria-disabled="true"]) { background-color: var(--sl-accent-hover); color: var(--sl-white); }
.sl-btn--secondary { background-color: var(--sl-white); border-color: var(--sl-gray-300); color: var(--sl-black); }
.sl-btn--secondary:hover:not(:disabled, .disabled, [aria-disabled="true"]) { background-color: var(--sl-off-white); border-color: var(--sl-black); color: var(--sl-black); }
.sl-btn--ghost { background-color: transparent; border-color: transparent; color: var(--sl-black); padding-left: 0; padding-right: 0; }
.sl-btn--ghost:hover:not(:disabled, .disabled, [aria-disabled="true"]) { color: var(--sl-accent); }
.sl-btn--inverse { background-color: transparent; border-color: rgba(255, 255, 255, 0.6); color: var(--sl-white); } /* border: --sl-white at 60% alpha */
.sl-btn--inverse:hover:not(:disabled, .disabled, [aria-disabled="true"]) { background-color: var(--sl-white); border-color: var(--sl-white); color: var(--sl-black); }
.sl-btn--inverse:focus-visible { outline-color: var(--sl-white); }

.sl-btn:disabled,
.sl-btn.disabled,
.sl-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/*
 * WooCommerce buttons → the same system (these classes are printed by WooCommerce's own
 * templates/JS, not this theme's php/js).
 *
 * woocommerce.css (kept enqueued) styles buttons through `.woocommerce …` chains up to
 * `.woocommerce button.button.alt:disabled[disabled]:hover` (0,6,1) and `.woocommerce #respond
 * input#submit…` (2,x,1). Every rule here starts with `body:not(#sl-btn)`: the never-matching
 * id inside :not() adds one id's worth of specificity (1,0,1), enough to beat those chains
 * without `!important`, and it is the same prefix everywhere so the rules below still cascade
 * in source order among themselves (base < size < variant).
 *
 * Mapping: `.button`/`a.button`/`button.button`/`input.button`, the review form submit and
 * block buttons → primary md; `.button.alt`, `.checkout-button`, `#place_order`, mini-cart
 * Checkout → accent; Update cart, mini-cart View cart and notice buttons → secondary;
 * `.single_add_to_cart_button` → primary (lg in the Layout 2 buy box, md elsewhere) even though
 * WooCommerce gives it `.alt`; the "View cart" link added after an AJAX add → ghost.
 */
body:not(#sl-btn) .button,
body:not(#sl-btn) #respond input#submit,
body:not(#sl-btn) .wc-block-components-button:not(.is-link),
body:not(#sl-btn) .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--sl-r-btn);
	background-color: var(--sl-black);
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	color: var(--sl-white);
	font-family: inherit;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--sl-duration) ease, background-color var(--sl-duration) ease, border-color var(--sl-duration) ease, transform var(--sl-duration) var(--sl-ease-apple);
}
body:not(#sl-btn) .button:active:not(:disabled, .disabled, [aria-disabled="true"]) {
	transform: scale(0.97);
}
body:not(#sl-btn) .button svg,
body:not(#sl-btn) .added_to_cart svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
body:not(#sl-btn) .button:focus-visible,
body:not(#sl-btn) #respond input#submit:focus-visible,
body:not(#sl-btn) .added_to_cart:focus-visible {
	outline: 2px solid var(--sl-black);
	outline-offset: 2px;
}
body:not(#sl-btn) .button:hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) #respond input#submit:hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .wc-block-components-button:not(.is-link):hover:not(:disabled, .disabled, [aria-disabled="true"]) {
	background-color: var(--sl-accent);
	color: var(--sl-white);
}

/* lg: Add to cart in the Layout 2 buy box row. */
body:not(#sl-btn) .sl-buybox .single_add_to_cart_button {
	min-height: 52px;
	padding: 0 2rem;
}

/* Accent. */
body:not(#sl-btn) .button.alt:not(.single_add_to_cart_button),
body:not(#sl-btn) .checkout-button,
body:not(#sl-btn) .button#place_order,
body:not(#sl-btn) .woocommerce-mini-cart__buttons .button.checkout {
	background-color: var(--sl-accent);
	border-color: transparent;
	color: var(--sl-white);
}
body:not(#sl-btn) .button.alt:not(.single_add_to_cart_button):hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .checkout-button:hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .button#place_order:hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .woocommerce-mini-cart__buttons .button.checkout:hover:not(:disabled, .disabled, [aria-disabled="true"]) {
	background-color: var(--sl-accent-hover);
	color: var(--sl-white);
}

/* Secondary. */
body:not(#sl-btn) .button[name="update_cart"],
body:not(#sl-btn) .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout),
body:not(#sl-btn) .woocommerce-message .button {
	background-color: var(--sl-white);
	border-color: var(--sl-gray-300);
	color: var(--sl-black);
}
body:not(#sl-btn) .button[name="update_cart"]:hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover:not(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) .woocommerce-message .button:hover:not(:disabled, .disabled, [aria-disabled="true"]) {
	background-color: var(--sl-off-white);
	border-color: var(--sl-black);
	color: var(--sl-black);
}

/* Ghost: WooCommerce's "View cart" link printed after an AJAX add to cart. */
body:not(#sl-btn) .added_to_cart {
	background-color: transparent;
	border-color: transparent;
	color: var(--sl-black);
	padding-left: 0;
	padding-right: 0;
}
body:not(#sl-btn) .added_to_cart:hover {
	color: var(--sl-accent);
}

/* Disabled: same variant colors at 40% (the hover rules above skip these states). */
body:not(#sl-btn) .button:is(:disabled, .disabled, [aria-disabled="true"]),
body:not(#sl-btn) #respond input#submit:is(:disabled, .disabled) {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	.sl-btn,
	body:not(#sl-btn) .button {
		transition: none;
	}
	.sl-btn:active,
	body:not(#sl-btn) .button:active {
		transform: none;
	}
}