/**
 * Single variation picker.
 *
 * Two controls live here. The native select is what the browser gets before the
 * script runs, and what it keeps if the script never runs. Once enhanced, the
 * wrapper gains .is-enhanced, the native select is hidden, and the button and
 * listbox below take over — option elements cannot be given two lines, a
 * separator or a right aligned price, which is the whole reason for the swap.
 *
 * WooCommerce's own per attribute selects are hidden throughout. They stay in
 * the DOM because the variation form reads and writes them.
 */

.alcli-vp {
	--vp-red: #cd4547;
	--vp-ink: #14110f;
	--vp-soft: #57514a;
	--vp-mute: #9a938a;
	--vp-beige: #f4efe3;
	--vp-line: rgba(20, 17, 15, 0.13);
	position: relative;
	margin: 0 0 18px;
	width: 100%;
}

.alcli-vp *,
.alcli-vp *::before,
.alcli-vp *::after {
	box-sizing: border-box;
}

.alcli-vp__label {
	display: block;
	margin-bottom: 7px;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--vp-soft);
}

.alcli-vp__field {
	position: relative;
	display: block;
	width: 100%;
}

/* --------------------------------------------------------- native select */

.alcli-vp .alcli-vp__select {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	border: 1px solid var(--vp-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 15px !important;
	color: var(--vp-ink) !important;
}

/* Once the listbox exists the select is only a form value carrier. Kept in the
   DOM and reachable, just not shown. */
.alcli-vp.is-enhanced .alcli-vp__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
}

/* --------------------------------------------------------------- button */

.alcli-vp .alcli-vp__button {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100% !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	border: 1px solid var(--vp-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--vp-ink) !important;
	text-align: start !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.alcli-vp:not(.has-value) .alcli-vp__button {
	color: var(--vp-mute) !important;
	font-weight: 500 !important;
}

.alcli-vp .alcli-vp__button:hover {
	border-color: rgba(20, 17, 15, 0.3) !important;
}

.alcli-vp .alcli-vp__button:focus-visible {
	outline: none;
	border-color: var(--vp-red) !important;
	box-shadow: 0 0 0 4px rgba(205, 69, 71, 0.13) !important;
}

.alcli-vp.is-open .alcli-vp__button {
	border-color: var(--vp-red) !important;
	box-shadow: 0 0 0 4px rgba(205, 69, 71, 0.13) !important;
}

.alcli-vp__buttontext {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alcli-vp__caret {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid var(--vp-ink);
	border-bottom: 2px solid var(--vp-ink);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.alcli-vp.is-open .alcli-vp__caret {
	margin-top: 2px;
	transform: rotate(-135deg);
}

/* -------------------------------------------------------------- listbox */

.alcli-vp__list {
	position: absolute;
	z-index: 60;
	inset-inline: 0;
	top: calc(100% + 6px);
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--vp-line);
	border-radius: 12px;
	box-shadow: 0 26px 52px -26px rgba(20, 17, 15, 0.6);
	animation: alcli-vp-drop 0.16s ease both;
	-webkit-overflow-scrolling: touch;
}

.alcli-vp__list[hidden] {
	display: none;
}

.alcli-vp__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	cursor: pointer;
	/* The separator is what makes a long list scannable. */
	border-bottom: 1px solid rgba(20, 17, 15, 0.07);
	transition: background-color 0.12s ease;
}

.alcli-vp__option:last-child {
	border-bottom: 0;
}

.alcli-vp__option.is-active,
.alcli-vp__option:hover {
	background: var(--vp-beige);
}

.alcli-vp__option.is-selected {
	background: rgba(205, 69, 71, 0.07);
	box-shadow: inset 3px 0 0 var(--vp-red);
}

.alcli-vp__optionmain {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.alcli-vp__optionsku {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vp-ink);
}

.alcli-vp__option.is-selected .alcli-vp__optionsku {
	color: var(--vp-red);
}

.alcli-vp__optiondetails {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 7px;
	font-size: 12.5px;
	color: var(--vp-soft);
}

.alcli-vp__optionsep {
	color: rgba(20, 17, 15, 0.22);
}

.alcli-vp__optionside {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.alcli-vp__optionprice {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--vp-red);
}

/* The superseded price: struck, grey and light, so the eye goes to the one
   being charged. Without this both figures render identically and the row
   reads as two prices rather than a reduction. */
.alcli-vp .alcli-vp__pricewas {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--vp-mute);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: 0.9;
}

/* <ins> is underlined by default in every browser, which next to a struck
   price reads as a second kind of emphasis. */
.alcli-vp .alcli-vp__pricenow {
	font-size: 14px;
	font-weight: 700;
	color: var(--vp-red);
	text-decoration: none;
	background: transparent;
}

.alcli-vp__optionout {
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--vp-mute);
	background: var(--vp-beige);
	border-radius: 999px;
	padding: 3px 9px;
}

.alcli-vp__option.is-out .alcli-vp__optionsku,
.alcli-vp__option.is-out .alcli-vp__optiondetails,
.alcli-vp__option.is-out .alcli-vp__optionprice,
.alcli-vp__option.is-out .alcli-vp__pricenow {
	color: var(--vp-mute);
}

@keyframes alcli-vp-drop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------- WooCommerce's own attribute rows */

/* Hidden, never removed: the variation form reads and writes these, and the
   form submits the variation id resolved from them. */
.woocommerce div.product form.cart table.variations,
form.variations_form table.variations,
form.variations_form .variations,
.elementor-widget-woocommerce-product-add-to-cart form.cart table.variations,
.elementor-widget-woocommerce-product-add-to-cart .variations {
	display: none !important;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
	.alcli-vp .alcli-vp__button,
	.alcli-vp .alcli-vp__select {
		/* 16px stops iOS zooming the page when the control is focused. */
		font-size: 16px !important;
		padding: 14px 15px !important;
	}

	.alcli-vp__option {
		flex-wrap: wrap;
		gap: 6px;
	}

	.alcli-vp__optionside {
		width: 100%;
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alcli-vp__list,
	.alcli-vp__caret,
	.alcli-vp__option,
	.alcli-vp .alcli-vp__button {
		animation: none !important;
		transition: none !important;
	}
}