/* WooCommerce Variation Buttons - Layout & Style Adjustments */

/* --- Layout Adjustments --- */

/* Remove table layout */
.variations {
	border-spacing: 0; /* Reset table spacing */
	display: block; /* Treat table as a block element */
}
.variations tbody {
	display: block; /* Treat tbody as a block element */
}
.variations tr {
	display: block; /* Treat rows as block elements */
}
.variations th.label,
.variations td.value {
	display: block; /* Stack label and value vertically */
	padding: 0; /* Remove default cell padding */
	text-align: left; /* Ensure left alignment */
}
.variations th.label {
	font-weight: bold;
	background-color: transparent !important; /* Override parent theme background */
	line-height: 0.2 !important;
}


/* Hide original dropdown more specifically and forcefully */
.variations td.value select.variation-select-hidden {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	position: absolute !important;
	left: -9999px !important;
}

/* --- Button Style Adjustments --- */

.variations .variation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px; /* Adjust spacing between buttons */
	/* margin-top: 0; Remove top margin as label provides spacing */
}

.variations .variation-button.button {
	padding: 6px 14px; /* Adjust padding */
	border: 1px solid #ff9800; /* Slightly darker orange border */
	background-color: #fff;
	color: #ff9800; /* Slightly darker orange text */
	border-radius: 30px; /* More rounded corners */
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	font-size: 0.8em; /* Slightly smaller font */
	line-height: 1.4;
	margin: 0;
	box-shadow: none; /* Remove potential theme button shadows */
	text-transform: none; /* Ensure no text transformation */
}

.variations .variation-button.button:hover {
	background-color: #fff3e0; /* Lighter orange background on hover */
	border-color: #fb8c00;
	color: #fb8c00;
}

.variations .variation-button.button.selected {
	background-color: #ff9800; /* Slightly darker orange background when selected */
	color: #fff;
	border-color: #ff9800;
}

.variations .variation-button.button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	border-color: #e0e0e0;
	color: #bdbdbd;
	background-color: #fafafa;
}