/* ============================================================
   bf-buy-now — shared "Buy Now" variation panel
   Used by any block button that targets a WooCommerce variable product.
   ============================================================ */

/*
 * The wrapper also carries the block's own button classes (so it inherits
 * that context's flex-grow/width rules and lays out exactly like the plain
 * <a> it replaces) — reset everything paint-related so only the inner
 * <button> is actually visible.
 */
.bf-buy-now {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/*
 * Positioned absolutely (floats over the page) rather than in normal flow —
 * so opening it doesn't grow the wrapper's box height, which would otherwise
 * stretch sibling buttons via the row's default align-items: stretch.
 */
.bf-buy-now__options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
	padding: 12px;
	min-width: 220px;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bf-buy-now.is-open .bf-buy-now__options {
	display: flex;
}

.bf-buy-now__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #3A3A3A;
	transition: background-color 0.2s ease;
}

.bf-buy-now__option:hover {
	background-color: #FAF6EA;
}

.bf-buy-now__option-dot {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
}