/* ==================================================
   BUTTONS — Mobile First
   Used site-wide: hero, product pages, cart, forms, etc.
================================================== */

/* Base = mobile */
.btn-primary,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond .form-submit input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.alt {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	background: var(--black);
	color: var(--white);
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.875rem 2rem;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background 0.25s;
}

.btn-primary:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond .form-submit input#submit:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.alt:hover {
	background: var(--accent);
}

.btn-primary svg {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	flex-shrink: 0;
}

.btn-text-link {
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--mid);
	text-decoration: none;
	border-bottom: 0.0625rem solid var(--border);
	padding-bottom: 0.1875rem;
	transition: color 0.2s, border-color 0.2s;
}

.btn-text-link:hover {
	color: var(--black);
	border-color: var(--black);
}

/* Keyboard accessibility — all breakpoints */
.btn-primary:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
}

.btn-text-link:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
	border-color: transparent;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.disabled {
	background: var(--black);
}

/* ─── DESKTOP (≥901px) ─── */
@media (min-width: 901px) {

	.btn-primary,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond .form-submit input#submit,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.alt {
		gap: 0.75rem;
		font-size: 0.71875rem;
		letter-spacing: 0.2em;
		padding: 1rem 2.5rem;
		justify-content: center;
	}

	.btn-primary svg {
		width: 0.875rem;
		height: 0.875rem;
	}

	.btn-text-link {
		font-size: 0.75rem;
		letter-spacing: 0.12em;
	}

}

/* ─── Hover-only micro-interactions — gated to pointer devices only.
   Touch devices never download/run this, since :hover has no meaning
   on a phone/tablet — saves parsing work on mobile. ─── */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {

	.btn-primary,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond .form-submit input#submit,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.alt {
		transition: background 0.25s, transform 0.2s;
	}

	.btn-primary:hover,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond .form-submit input#submit:hover,
	.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .single_variation_wrap button.button.alt {
		transform: translateY(-0.0625rem);
	}

	.btn-primary svg {
		transition: transform 0.25s;
	}

	.btn-primary:hover svg {
		transform: translateX(0.3125rem);
	}

}

@media (prefers-reduced-motion: reduce) {

	.btn-primary:hover {
		transform: none !important;
	}

	.btn-primary:hover svg {
		transform: none !important;
	}

}

.btn-outline {
	display: inline-block;
	border: 0.0625rem solid var(--black);
	background: transparent;
	color: var(--black);
	font-family: var(--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.875rem 2.5rem;
	text-decoration: none;
	transition: background 0.25s, color 0.25s;
}

.btn-outline:hover {
	background: var(--black);
	color: var(--white);
}

.btn-outline:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
}