/**
 * Wooden — botón de remanente.
 *
 * Es una acción secundaria y contextual: aparece sólo cuando el cliente llegó al
 * último múltiplo y todavía queda stock suelto. Tiene que verse sin competirle al
 * botón de comprar, así que es un chip con relleno propio y borde, no un botón
 * sólido.
 *
 * Todos los colores están escritos acá y no se heredan del tema. La versión anterior
 * heredaba fondo y color, y los estilos de botón del tema/Elementor le ganaban: el
 * resultado era texto blanco sobre fondo blanco. Por lo mismo van con !important las
 * propiedades visuales: las reglas de `button` del tema son más específicas y no se
 * pueden anticipar una por una.
 *
 * Paleta cálida y neutra, pensada sobre fondo blanco. Sin variante oscura a
 * propósito: la tienda tiene un solo tema y un bloque prefers-color-scheme haría que
 * el chip se pusiera oscuro en una página que sigue siendo blanca.
 */

button.wooden-uds-todo {
	/* Presentación */
	/* Alineado a la DERECHA, debajo del campo de cantidad. El ancho es el del
	   contenido; margin-left:auto lo empuja contra el borde derecho de la fila. */
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: .55em;
	width: fit-content !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow-wrap: break-word;
	height: auto !important;
	min-height: 0 !important;
	margin: .85em 0 0 auto !important;  /* auto a la izquierda = pegado a la derecha */
	padding: .55em .9em !important;
	float: none !important;
	align-self: flex-end;    /* si el contenedor padre es flex, contra el borde derecho */
	clear: both;             /* Woo flota div.quantity a la izquierda */

	/* Color: explícito, nunca heredado */
	background: #F6F5F3 !important;
	border: 1px solid #DAD5CE !important;
	border-radius: 8px !important;
	color: #1F1B16 !important;
	box-shadow: none !important;

	/* Tipografía */
	font-family: inherit !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;   /* muchos temas ponen los botones en mayúscula */
	text-decoration: none !important;
	text-align: left;

	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
	animation: wooden-uds-aparecer .18s ease-out;
}

/**
 * Ícono a la izquierda del texto: un signo +.
 *
 * Antes era un chevron hacia arriba y se leía como si apuntara al botón de comprar
 * que tiene encima. El + no tiene dirección y dice exactamente lo que hace: sumar
 * las unidades que faltan. Dibujado con dos barras en vez de un carácter, para que
 * quede nítido en cualquier tamaño y no dependa de la tipografía del tema.
 */
button.wooden-uds-todo::before {
	content: "";
	flex: 0 0 auto;
	position: relative;
	width: .7em;
	height: .7em;
	background:
		linear-gradient( currentColor, currentColor ) center / 100% 2px no-repeat,
		linear-gradient( currentColor, currentColor ) center / 2px 100% no-repeat;
	opacity: .6;
}

button.wooden-uds-todo:hover {
	background: #EDEAE4 !important;
	border-color: #C4BCB1 !important;
}

button.wooden-uds-todo:active {
	background: #E4E0D8 !important;
}

button.wooden-uds-todo:focus-visible {
	outline: 2px solid #1F1B16 !important;
	outline-offset: 2px;
}

/* Gana al display:flex de arriba cuando el botón está oculto. */
button.wooden-uds-todo[hidden] {
	display: none !important;
}

@keyframes wooden-uds-aparecer {
	from { opacity: 0; transform: translateY( -.25em ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	button.wooden-uds-todo {
		animation: none;
		transition: none;
	}
}