/* ===================================================================
   ASTYLIO Variation Buttons — replaces dropdowns with clickable options.
   Hides native WooCommerce selects, adds button UI on top.
   =================================================================== */

/* ── Hide native WooCommerce variation selects ─────────────────── */
.variations_form .variations td.value select {
	display: none !important;
}

.variations_form .variations td.value {
	padding-bottom: 0;
}

/* ── Variation Buttons Container ───────────────────────────────── */
.aksh-var-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ── Individual Option Button ──────────────────────────────────── */
.aksh-var-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 40px;
	padding: 0 14px;
	font-family: var(--astylio-font-body, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text, #252525);
	background: var(--color-bg-surface, #FCFAF7);
	border: 1.5px solid var(--color-border, #DED6CE);
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.aksh-var-btn:hover:not(.aksh-var-btn--disabled) {
	opacity: 0.75;
}

.aksh-var-btn:focus {
	outline: none;
}

.aksh-var-btn:focus-visible {
	outline: 2px solid var(--color-brand-primary, #5A1F2B);
	outline-offset: 2px;
}

/* ── Selected State ────────────────────────────────────────────── */
.aksh-var-btn--selected {
	background: var(--color-brand-primary, #5A1F2B);
	border-color: var(--color-brand-primary, #5A1F2B);
	color: #fff;
	opacity: 1;
}

.aksh-var-btn--selected:hover {
	background: var(--color-brand-primary-hover, #42151F);
	border-color: var(--color-brand-primary-hover, #42151F);
	opacity: 1;
}

/* ── Disabled / Unavailable State ──────────────────────────────── */
.aksh-var-btn--disabled {
	opacity: 0.3;
	cursor: not-allowed;
	border-style: dashed;
}

/* 🛒 Single price: summary .price is the sole price display. Hide the
   duplicate variation price WooCommerce renders inside .single_variation;
   its availability (stock) row stays visible. */
.variations_form .single_variation .woocommerce-variation-price {
	display: none;
}

/* Completely remove stock message from layout */
.variations_form .single_variation .woocommerce-variation-availability {
	display: none !important;
}

/* 🔄 Reset link */
.variations_form .reset_variations {
	display: inline-flex;
	align-items: center;
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--color-text-secondary, #6B625D);
	text-decoration: underline;
	cursor: pointer;
}
.variations_form .reset_variations:hover {
	color: var(--color-text, #252525);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.aksh-var-btn {
		min-width: 40px;
		height: 38px;
		padding: 0 10px;
		font-size: 12px;
		/* P1-04 (aksh-mobile-robustness-p1): long attribute labels
		   ("Midnight Blue", "Extra Large") wrap inside the button instead
		   of forcing the wrapped button group wider than the viewport. The
		   container's flex-wrap + gap are unchanged; a single label can
		   never exceed the row. */
		white-space: normal;
		max-width: 100%;
		height: auto;
		min-height: 38px;
	}
}