.b2x-variable-items-wrapper {
	margin: 0 1rem 0 1rem;
	padding: 0;
}

.b2x-variable-items-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.b2x-variable-item {
	min-width: 48px;
	min-height: 40px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 5px;
	cursor: pointer;
	background: #fff;
	transition: all 0.2s ease;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	font-size: var(--wvs-single-product-item-font-size, 16px);
	-webkit-box-shadow: var(--wvs-selected-item-box-shadow, 0 0 0 2px #000); 
	box-shadow: var(--wvs-selected-item-box-shadow, 0 0 0 2px #000); 
	color: var(--wvs-selected-item-text-color, #000);
	font-family: var(--e-global-typography-e3fdf96-font-family), Sans-serif;
	font-weight: var(--e-global-typography-e3fdf96-font-weight);
}

.b2x-variable-item:hover {
	border-color: #111;
}

.b2x-variable-item.selected {
	background-color: #09090d !important;
	color: #ffffff !important;
	border: 2px solid #09090d !important;
}

.b2x-variable-item.disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.b2x-variable-item:focus-visible {
	outline: 2px solid #111;
	outline-offset: 1px;
}

/* ============================================
   AJAX ADD TO CART - LOADING STATES
   ============================================ */

.single_add_to_cart_button.loading,
.add_to_cart_button.loading {
	opacity: 0.7;
	cursor: wait;
	position: relative;
}

.single_add_to_cart_button .button-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ============================================
   MENSAJE "AÑADIDO AL CARRITO"
   ============================================ */

.b2x-added-message {
	/* Layout - Forzar nueva línea */
	display: block !important;
	width: 100% !important;
	flex-basis: 100% !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	
	/* Asegurar que rompa la línea en flex containers */
	order: 999 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	
	/* Espaciado */
	margin-top: 10px !important;
	padding: 8px 12px !important;
	
	/* Estilo visual */
	text-align: center !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #2c7a2f !important;
	background-color: #e8f5e9 !important;
	border: 1px solid #81c784 !important;
	border-radius: 4px !important;
	
	/* Animación */
	opacity: 1;
	transition: opacity 0.4s ease;
	
	/* Asegurar que esté arriba de otros elementos */
	position: relative;
	z-index: 10;
}

/* Para contenedores flex específicos */
.e-atc-qty-button-holder {
	/* Asegurar que el mensaje pueda tomar toda la línea */
	flex-wrap: wrap !important;
}

.e-atc-qty-button-holder .b2x-added-message {
	/* Forzar salto de línea después del botón */
	width: 100% !important;
	flex-basis: 100% !important;
}

/* Estados del mensaje */
.b2x-added-message.fadeout {
	opacity: 0;
}

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

@media (max-width: 768px) {
	.b2x-variable-item {
		min-width: 44px;
		min-height: 36px;
		font-size: 14px;
	}
	
	.b2x-added-message {
		font-size: 13px !important;
		padding: 6px 10px !important;
	}
}

/* ============================================
   COMPATIBILIDAD CON TEMAS
   ============================================ */

/* Asegurar que funcione con diferentes estructuras de temas */
.cart .b2x-added-message,
.product .b2x-added-message,
.woocommerce .b2x-added-message {
	clear: both !important;
	display: block !important;
	width: 100% !important;
}

/* Para layouts de grid */
.woocommerce-variation-add-to-cart .b2x-added-message {
	grid-column: 1 / -1 !important;
}

/* PÁGINA DE PRODUCTO - Mensaje después del contenedor */
.woocommerce-variation-add-to-cart + .b2x-added-message,
.woocommerce-variation-add-to-cart-enabled + .b2x-added-message {
	/* El mensaje está DESPUÉS del contenedor, así que solo necesita ser bloque */
	width: 100% !important;
	clear: both !important;
	display: block !important;
	margin-top: 10px !important;
}