/* ==========================================================================
   Velas Velia — Producto variable (WooCommerce single, variaciones)
   --------------------------------------------------------------------------
   Estilos del formulario de variaciones (moldes con tamaños 5/6/8 cm y kits):
   selectores de atributo como <select> de marca, precio de la variación en la
   price-pill dorada y bloque de compra coherente con la ficha simple.
   SOLO tokens del sistema; reusa los componentes vv- (price-pill, btn, field).
   ========================================================================== */

/* --- Formulario de variaciones ------------------------------------------- */
.vv-variable {
	width: 100%;
}

/* --- Bloque de opciones (un atributo por fila) --------------------------- */
.vv-variable__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.vv-variable__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.vv-variable__label {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-label);
	color: var(--text-body);
}

.vv-variable__control {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* --- Selector de atributo de Woo, con look de marca ----------------------
   Es el <select> nativo que necesita add-to-cart-variation.js; lo estilizamos
   como el pill OUTLINE de la guía ("Escoge tu aroma"): borde fino camel,
   fondo transparente y texto terracota con tracking. La flecha (chevron) es
   terracota para casar con el texto.                                          */
.vv-variable__control .vv-select,
.vv-variable .variations select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 240px;
	max-width: 340px;
	box-sizing: border-box;
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--text-base);
	letter-spacing: 0.06em;
	color: var(--terra-600);
	background-color: transparent;
	/* Flecha (chevron) terracota dibujada con SVG inline, color --terra-600 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C17A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-5) center;
	border: var(--border-w) solid var(--terra-300);
	border-radius: var(--radius-pill);
	padding: 14px 48px 14px 24px;
	cursor: pointer;
	outline: none;
	transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* Las opciones del desplegable nativo se ven con el color de texto del sistema
   (algunos navegadores heredan el color terracota del select). */
.vv-variable__control .vv-select option,
.vv-variable .variations select option {
	color: var(--text-body);
	letter-spacing: normal;
}

.vv-variable__control .vv-select:hover,
.vv-variable .variations select:hover {
	border-color: var(--terra-500);
	background-color: var(--terra-100);
}

.vv-variable__control .vv-select:focus,
.vv-variable .variations select:focus {
	border-color: var(--terra-600);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --- Enlace "Restablecer opciones" --------------------------------------- */
.vv-variable__reset {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--gold-700);
	text-decoration: none;
	border-bottom: var(--border-w) solid transparent;
	transition: border-color var(--dur) var(--ease-out);
}

.vv-variable__reset:hover {
	border-bottom-color: var(--gold-400);
}

/* Woo oculta el reset hasta que hay una selección; respetamos su display:none
   inline pero le damos margen cuando es visible. */
.vv-variable__reset {
	margin-left: var(--space-2);
}

/* ==========================================================================
   BLOQUE DE LA VARIACIÓN (precio / disponibilidad / compra)
   ========================================================================== */

.vv-variable .single_variation_wrap {
	width: 100%;
	margin-top: var(--space-5);
}

/* Descripción específica de la variación seleccionada */
.vv-variable__variation-desc,
.vv-variable .woocommerce-variation-description {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--text-body);
	margin: 0 0 var(--space-3);
}

.vv-variable__variation-desc:empty {
	display: none;
	margin: 0;
}

/* Precio real de la variación: texto grande en tinta, igual que el precio
   principal de la ficha (coherente con la guía, no la pill dorada). */
.vv-variable__variation-price,
.vv-variable .woocommerce-variation-price {
	margin: 0 0 var(--space-4);
}

.vv-variable__variation-price .vv-price-pill,
.vv-variable__variation-price .vv-price-pill--lg {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.vv-variable__variation-price .vv-price-pill,
.vv-variable__variation-price .vv-price-pill ins,
.vv-variable__variation-price .vv-price-pill .amount {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--text-xl);
	letter-spacing: -0.01em;
	color: var(--text-heading);
	text-decoration: none;
}

.vv-variable__variation-price .vv-price-pill del,
.vv-variable__variation-price .vv-price-pill del .amount {
	font-size: var(--text-lg);
	font-weight: var(--fw-medium);
	color: var(--text-muted);
	text-decoration: line-through;
	opacity: 0.7;
	margin-right: var(--space-1);
}

/* Disponibilidad / stock de la variación */
.vv-variable__variation-stock,
.vv-variable .woocommerce-variation-availability {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0 0 var(--space-3);
}

.vv-variable__variation-stock .out-of-stock,
.vv-variable .woocommerce-variation-availability .out-of-stock {
	color: #c06a5e;
}

/* Nota de marca "Bajo pedido · 5 días hábiles" */
.vv-variable__note {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	color: var(--text-muted);
	margin: var(--space-2) 0 0;
}

/* Mensaje cuando la combinación no está disponible / sin variaciones */
.vv-variable__unavailable {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: #c06a5e;
	margin: var(--space-3) 0 0;
}

/* ==========================================================================
   FILA DE COMPRA (cantidad + botón) — reusa .vv-single__buy de la ficha
   ========================================================================== */

.vv-variable .vv-single__buy {
	margin-top: var(--space-5);
}

/* El stepper de cantidad (−/caja blanca/+) lo define woo-single.css y se
   reutiliza tal cual aquí; no se redefine para que ambos bloques (simple y
   variable) sean idénticos al de la guía. */

/* Botón deshabilitado mientras no hay variación elegida (lo togglea Woo) */
.vv-variable .single_add_to_cart_button.disabled,
.vv-variable .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
	.vv-variable__control .vv-select,
	.vv-variable .variations select {
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}
}