/**
 * Lux Variation — front-end styles.
 *
 * All colours come from CSS custom properties printed inline by PHP, so the
 * settings screen can retheme the whole box without touching this file.
 */

.lux-variation {
	--lux-primary: #4a1620;
	--lux-primary-hover: #63202d;
	--lux-selected: #6d3f4a;
	--lux-pill-border: #e8e8e8;
	--lux-pill-text: #3a3a3a;
	--lux-muted: #8a8a8a;
	--lux-price-color: #1a1a1a;
	--lux-radius: 16px;
	--lux-btn-radius: 16px;
	--lux-pill-min-width: 96px;

	/* Layout knobs — the Elementor widget overrides these per breakpoint. */
	--lux-attrs-direction: row;
	--lux-attrs-gap-row: 22px;
	--lux-attrs-gap-col: 40px;
	--lux-attrs-align: flex-start;
	--lux-options-gap: 8px;
	--lux-options-justify: flex-start;
	--lux-opt-min-height: 56px;
	--lux-opt-padding: 10px 20px;
	--lux-swatch-size: 44px;
	--lux-cart-direction: row;
	--lux-cart-gap-row: 16px;
	--lux-cart-gap-col: 28px;
	--lux-cart-align: center;
	--lux-btn-min-height: 60px;
	--lux-btn-padding: 12px 28px;
	--lux-btn-gap: 12px;
	--lux-btn-grow: 1;
	--lux-icon-size: 22px;

	display: block;
	width: 100%;
	margin: 0;
}

/* WooCommerce still fills this block; we render our own price instead. */
.lux-variation .single_variation,
.lux-variation .woocommerce-variation-description,
.lux-variation .woocommerce-variation-price,
.lux-variation .woocommerce-variation-availability {
	display: none !important;
}

/* The real form controls: kept in the DOM and focusable, just not painted. */
.lux-variation .lux-attr__select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- attributes */

.lux-variation .lux-attrs {
	display: flex;
	flex-direction: var(--lux-attrs-direction);
	flex-wrap: wrap;
	align-items: var(--lux-attrs-align);
	gap: var(--lux-attrs-gap-row) var(--lux-attrs-gap-col);
	margin: 0 0 28px;
}

.lux-variation .lux-attr {
	flex: 0 1 var(--lux-attr-basis, auto);
	min-width: 0;
}

.lux-variation .lux-attr__head {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 14px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--lux-muted);
}

.lux-variation .lux-attr__label {
	font-weight: 500;
}

.lux-variation .lux-attr__sep {
	opacity: 0.7;
}

.lux-variation .lux-attr__value {
	color: var(--lux-pill-text);
	font-weight: 600;
}

.lux-variation .lux-attr__value.is-empty {
	color: var(--lux-muted);
	font-weight: 400;
}

.lux-variation .lux-attr__options {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--lux-options-justify);
	gap: var(--lux-options-gap);
	padding: 8px;
	border: 1px solid var(--lux-pill-border);
	border-radius: calc(var(--lux-radius) + 4px);
	background: #fff;
}

/* -------------------------------------------------------------------- option */

.lux-variation .lux-opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: var(--lux-pill-min-width);
	min-height: var(--lux-opt-min-height);
	padding: var(--lux-opt-padding);
	margin: 0;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--lux-pill-text);
	text-align: center;
	background: #fff;
	border: 1px solid var(--lux-pill-border);
	border-radius: var(--lux-radius);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
		opacity 0.18s ease, transform 0.18s ease;
}

/*
 * Background and colour are restated on every state on purpose. Theme resets
 * (Hello Elementor styles bare `button:hover`/`button:focus` with its own
 * accent) would otherwise repaint the pill. Two classes already outrank
 * `button:hover`, so none of this needs !important.
 */
.lux-variation .lux-opt:hover,
.lux-variation .lux-opt:focus,
.lux-variation .lux-opt:active {
	color: var(--lux-pill-text);
	background: #fff;
	border-color: var(--lux-selected);
}

.lux-variation .lux-opt.is-selected:hover,
.lux-variation .lux-opt.is-selected:focus,
.lux-variation .lux-opt.is-selected:active {
	color: #fff;
	background: var(--lux-selected);
	border-color: var(--lux-selected);
}

.lux-variation .lux-opt:focus-visible {
	outline: 2px solid var(--lux-primary);
	outline-offset: 2px;
}

.lux-variation .lux-opt.is-selected {
	color: #fff;
	background: var(--lux-selected);
	border-color: var(--lux-selected);
}

.lux-variation .lux-opt.is-unavailable {
	color: var(--lux-muted);
	background: #fbfbfb;
	border-style: dashed;
	opacity: 0.55;
}

.lux-variation .lux-opt.is-unavailable .lux-opt__text {
	text-decoration: line-through;
}

/* Colour / palette / image swatches render as a tile; the label stays for a11y only. */
.lux-variation .lux-opt--color,
.lux-variation .lux-opt--palette,
.lux-variation .lux-opt--image {
	min-width: 0;
	min-height: 0;
	padding: 3px;
	border-color: transparent;
	background: transparent;
}

.lux-variation .lux-opt--color .lux-opt__text,
.lux-variation .lux-opt--palette .lux-opt__text,
.lux-variation .lux-opt--image .lux-opt__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lux-variation .lux-opt__swatch {
	display: block;
	width: var(--lux-swatch-size, 44px);
	height: var(--lux-swatch-size, 44px);
	overflow: hidden;
	background-color: var(--lux-swatch, #eee);
	background-image: var(--lux-swatch-image, none);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: calc(var(--lux-radius) - 6px);
}

.lux-variation .lux-opt__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lux-variation .lux-opt--color.is-selected,
.lux-variation .lux-opt--palette.is-selected,
.lux-variation .lux-opt--image.is-selected {
	background: transparent;
	border-color: var(--lux-primary);
	box-shadow: 0 0 0 1px var(--lux-primary);
}

.lux-variation .lux-opt--color.is-selected .lux-opt__swatch,
.lux-variation .lux-opt--palette.is-selected .lux-opt__swatch,
.lux-variation .lux-opt--image.is-selected .lux-opt__swatch {
	transform: scale(0.94);
}

/* ---------------------------------------------------------------------- reset */

.lux-variation .lux-reset {
	display: none;
	align-self: center;
	font-size: 0.875rem;
	color: var(--lux-muted);
	text-decoration: underline;
	background: none;
	border: 0;
}

.lux-variation.lux-has-selection .lux-reset {
	display: inline-block;
}

/* -------------------------------------------------------------------- buy box */

.lux-variation .lux-buybox {
	display: block;
}

.lux-variation .lux-cart-row {
	display: flex;
	flex-direction: var(--lux-cart-direction);
	flex-wrap: wrap;
	align-items: var(--lux-cart-align);
	gap: var(--lux-cart-gap-row) var(--lux-cart-gap-col);
}

.lux-variation .lux-price {
	flex: 0 1 auto;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--lux-price-color);
	white-space: nowrap;
}

.lux-variation .lux-price .price,
.lux-variation .lux-price ins {
	color: inherit;
	text-decoration: none;
	background: none;
}

.lux-variation .lux-price del {
	display: inline-block;
	margin-inline-start: 10px;
	font-size: 0.55em;
	font-weight: 500;
	color: var(--lux-muted);
	opacity: 1;
}

.lux-variation .lux-price .woocommerce-Price-currencySymbol {
	font-size: 0.72em;
	font-weight: 700;
}

.lux-variation .lux-cart-row__actions {
	display: flex;
	flex: 1 1 260px;
	align-items: center;
	gap: 12px;
}

.lux-variation .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.lux-variation .quantity .qty {
	height: 60px;
	min-width: 78px;
	padding: 0 10px;
	font-size: 1rem;
	text-align: center;
	border: 1px solid var(--lux-pill-border);
	border-radius: var(--lux-btn-radius);
}

.lux-variation .lux-btn,
.lux-variation button.lux-btn,
.lux-variation .single_add_to_cart_button.lux-btn {
	display: inline-flex;
	flex: var(--lux-btn-grow) 1 auto;
	align-items: center;
	justify-content: center;
	gap: var(--lux-btn-gap);
	box-sizing: border-box;
	min-height: var(--lux-btn-min-height);
	padding: var(--lux-btn-padding);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
	background: var(--lux-primary);
	border: 0;
	border-radius: var(--lux-btn-radius);
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.lux-variation .lux-btn:hover,
.lux-variation .lux-btn:focus,
.lux-variation .lux-btn:active {
	color: #fff;
	background: var(--lux-primary-hover);
	border-color: transparent;
}

.lux-variation .lux-btn:focus-visible {
	outline: 2px solid var(--lux-primary);
	outline-offset: 3px;
}

.lux-variation .lux-btn.disabled,
.lux-variation .lux-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.lux-variation .lux-btn__icon {
	flex: 0 0 auto;
	width: var(--lux-icon-size);
	height: var(--lux-icon-size);
}

.lux-variation .lux-availability {
	margin-top: 12px;
	font-size: 0.9375rem;
	color: var(--lux-muted);
}

.lux-variation .lux-availability:empty {
	margin-top: 0;
}

.lux-variation .lux-availability .stock {
	margin: 0;
}

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

/*
 * Default mobile behaviour. The variables are set on the same element the
 * Elementor widget targets (`.lux-variation`), so any per-breakpoint value
 * coming from the widget wins on specificity without needing !important.
 */
@media (max-width: 640px) {
	.lux-variation {
		--lux-attr-basis: 100%;
		--lux-cart-direction: column;
		--lux-cart-align: stretch;
	}

	.lux-variation .lux-cart-row__actions {
		flex: 1 1 auto;
	}
}

/* Editor-only placeholder when no product can be resolved. */
.lux-variation-notice {
	padding: 20px;
	font-size: 0.9375rem;
	color: #6b6b6b;
	text-align: center;
	background: #f7f7f7;
	border: 1px dashed #d5d5d5;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.lux-variation .lux-opt,
	.lux-variation .lux-btn,
	.lux-variation .lux-opt__swatch {
		transition: none;
	}
}