/**
 * Custom Variation List — visual styling.
 * Edit this file freely to adjust the look of the variation list;
 * the markup/logic lives in variation-list.js and class-cvl-frontend.php.
 */

/* Hide the default WooCommerce attribute dropdown table, keep it in the DOM
   so the underlying <select> elements keep working for our JS + WC core JS. */
.variations_form .variations {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.variations_form .reset_variations_alert {
	display: none;
}

.cvl-variation-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 10px 0 20px;
}

.cvl-variation-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid #e3d9c9;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cvl-variation-item:hover {
	border-color: #c9b892;
}

.cvl-variation-item--active {
	background: #f5f5f5;
	border-color: #d8cdb8;
}

.cvl-variation-radio {
	flex: 0 0 auto;
	display: flex;
}

.cvl-variation-radio input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #8a6d3b;
}

.cvl-variation-image {
	flex: 0 0 auto;
	display: flex;
}

.cvl-variation-image img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.cvl-variation-details {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 4px;
	flex: 1 1 auto;
}

.cvl-variation-title {
	flex: 1 1 100%;
	font-weight: 700;
	font-size: 1.05em;
	color: #1a1a1a;
}

.cvl-variation-price {
	font-weight: 700;
	font-size: 1.15em;
	color: #1a1a1a;
}

.cvl-variation-price ins {
	text-decoration: none;
}

.cvl-variation-price del {
	opacity: 0.6;
	font-weight: 400;
	margin-right: 6px;
}

.cvl-variation-stock .stock {
	margin: 0;
	font-weight: 600;
	color: #7aa02c;
	font-size: 0.95em;
}

.cvl-variation-stock .stock.out-of-stock {
	color: #c0392b;
}

.cvl-variation-savings {
	flex: 1 1 100%;
	color: #c0392b;
	font-size: 0.95em;
}