/*
 * 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;
}

/* --- "Añadir al carrito" y "Comprar ahora": mismo tamaño y estilo, en fila --- */
.chavo-buy-buttons {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	width: 100%;
}
.chavo-buy-buttons .single_add_to_cart_button,
.chavo-buy-buttons .chavo-buy-now-button {
	flex: 1 1 0;
	margin: 0 !important;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	text-align: center;
}
@media (max-width: 480px) {
	.chavo-buy-buttons {
		flex-direction: column;
	}
}

/* --- Giro de imagen en listados (sustituye a Magni Image Flip) --- */
.chavo-flip-wrap {
	display: block;
	perspective: 1000px;
}
.chavo-flip-inner {
	display: block;
	position: relative;
	width: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.chavo-flip-wrap:hover .chavo-flip-inner {
	transform: rotateY(180deg);
}
.chavo-flip-front,
.chavo-flip-back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	width: 100%;
	display: block;
}
.chavo-flip-back {
	position: absolute;
	inset: 0;
	top: 0;
	left: 0;
	transform: rotateY(180deg);
	object-fit: cover;
	height: 100%;
}
@media (hover: none) {
	/* Sin ratón real (móvil/tablet): no tiene sentido un hover que nunca se
	   dispara limpio con el dedo — se deja solo la imagen principal. */
	.chavo-flip-wrap:hover .chavo-flip-inner {
		transform: none;
	}
}

/* --- Iconos de pago en la ficha de producto, junto a los botones --- */
/* !important en el <img>: misma especificidad (0,1,1) que ".elementor img"
   y ".woocommerce img" (height:auto), que se cargan después y ganaban el
   empate — igual que ya documentado arriba para .chavo-qty-btn. */
.chavo-product-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}
.chavo-product-payment-icons img {
	height: 20px !important;
	width: auto !important;
	max-width: none !important;
	display: block;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	background: #fff;
	padding: 2px 4px;
}