/*
 * UI de Chavo Core: botones de cantidad, badges e iconos de pago.
 * Reescritura de Code Snippets #16 (CSS móvil) y #22 (CSS de carrito,
 * consolidando la versión activa; se descarta #20, su predecesora inactiva).
 */

/* --- Botones de cantidad +/- (ficha y carrito) --- */
.quantity {
	display: inline-grid;
	grid-template-columns: 34px 56px 34px;
	align-items: center;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	width: max-content;
}

.quantity .qty {
	width: 100%;
	height: 38px;
	border: 0;
	outline: none;
	box-shadow: none;
	text-align: center;
	font-size: 15px;
	padding: 0;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.quantity .qty[type='number'] {
	-moz-appearance: textfield;
}

/* !important en todo el bloque a propósito: el widget nativo de Elementor
   "Añadir al carrito" genera, por cada producto, una hoja de estilos propia
   con reglas sobre `.cart button` (pensadas solo para el botón real de
   compra) que por especificidad ganaban también a estos botones +/- al ser
   <button> dentro de la misma .cart, y el reset.css del tema
   (`button { padding:.5rem 1rem }`) reducía el hueco útil a 2px dentro de la
   columna fija de 34px del grid, cortando el símbolo. Fondo sólido en el
   mismo oro oscuro que el resto de la web (botón de compra, ofertas) para
   que el símbolo +/- se vea siempre, con buen contraste. */
.chavo-qty-btn {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 38px !important;
	text-align: center !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	background: #8B6914 !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	user-select: none !important;
	transition: background 120ms ease, transform 60ms ease !important;
}
.chavo-qty-btn:hover {
	background: #6f5410 !important;
}
.chavo-qty-btn:active {
	transform: translateY(1px) !important;
}
.chavo-qty-btn:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 768px) {
	.woocommerce div.product form.cart .quantity {
		margin-bottom: 10px;
	}
}

/* Fila de cantidad de la página de carrito: la etiqueta responsive queda a
   la izquierda y el control, a la derecha. */
@media (max-width: 768px) {
	.woocommerce .shop_table_responsive tr td.product-quantity,
	.woocommerce-cart .shop_table_responsive tr td.product-quantity {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.woocommerce .shop_table_responsive tr td.product-quantity::before,
	.woocommerce-cart .shop_table_responsive tr td.product-quantity::before {
		margin-right: auto;
	}
	.woocommerce-cart-form .quantity {
		margin-left: auto;
		grid-template-columns: 32px 50px 32px;
	}
}

/* --- Badges de producto --- */
.chavo-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	margin: 0 4px 4px 0;
}
.chavo-badge-new {
	background-color: #2fadde;
}

/* --- Iconos de pasarela en el checkout --- */
.chavo-payment-icon {
	height: 20px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
}