/**
 * Amazon Buy Button - Front-end Styles
 *
 * Orange CTA that replaces WooCommerce Add to Cart everywhere.
 * Two contexts:
 *   .wayfinder-amazon-btn             — compact, used in product loops
 *   .wayfinder-amazon-btn--single     — full-width, used on single product pages
 *
 * @package WayfinderProductExtras
 */

/* ----------------------------------------------------------------
   Base button — both contexts
   ---------------------------------------------------------------- */
.wayfinder-amazon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #ffffff;
	background-color: var(--color-orange, #FF7A3D);
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast, 150ms ease),
	            box-shadow var(--transition-fast, 150ms ease);
}

.wayfinder-amazon-btn:hover {
	background-color: #e86a2d; /* 10% darker */
	color: #ffffff;
	text-decoration: none;
}

.wayfinder-amazon-btn:focus-visible {
	outline: 3px solid var(--color-orange, #FF7A3D);
	outline-offset: 3px;
	background-color: #e86a2d;
	color: #ffffff;
}

/* ----------------------------------------------------------------
   Icon — external-link SVG
   ---------------------------------------------------------------- */
.wayfinder-amazon-btn__icon {
	flex-shrink: 0;
	display: block;
}

/* ----------------------------------------------------------------
   Loop context — sits below price in WC product cards
   ---------------------------------------------------------------- */
.woocommerce ul.products li.product .wayfinder-amazon-btn {
	margin-top: 8px;
	width: 100%;
}

/* ----------------------------------------------------------------
   Single product context — full width, larger
   ---------------------------------------------------------------- */
.wayfinder-amazon-btn--single {
	display: flex;
	width: 100%;
	max-width: 360px;
	padding: 15px 32px;
	font-size: 16px;
	border-radius: 6px;
	margin-top: var(--space-md, 16px);
}

.wayfinder-amazon-btn--single:hover {
	box-shadow: 0 4px 16px rgba(255, 122, 61, 0.35);
}

/* ----------------------------------------------------------------
   Responsive — mobile: single button goes full width
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.wayfinder-amazon-btn--single {
		max-width: 100%;
	}
}