/**
 * 2G Vibe — product-card quantity stepper
 * Location: woostify-child/assets/css/loop-qty.css
 *
 * Loaded site-wide because product cards appear on archives, the homepage
 * Elementor grids, related products and search results. Kept deliberately small
 * for that reason.
 *
 * The stepper is sized to match the "Add to cart" button it replaces, so cards
 * do not jump height when a product goes into the cart. If you restyle the loop
 * button, mirror the height here.
 */

.tg-loop-qty {
	--tg-lq-h: 44px;

	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	height: var(--tg-lq-h);
	margin: 0 auto;
	border: 1px solid var(--tg-brown, #4a2317);
	border-radius: var(--tg-radius, 4px);
	background: var(--tg-brown, #4a2317);
	overflow: hidden;
	box-sizing: border-box;
	transition: opacity .18s ease;
}

.tg-loop-qty__btn {
	flex: 0 0 44px;          /* 44px = accessible tap target */
	border: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease;
}

.tg-loop-qty__btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }

.tg-loop-qty__btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.tg-loop-qty__btn:focus-visible {
	outline: 2px solid var(--tg-gold, #d4a017);
	outline-offset: -3px;
}

.tg-loop-qty__value {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums; /* stops the width jittering 9 -> 10 */
	user-select: none;
}

/* In-flight state. Pointer events stay off so a double-tap cannot queue work. */
.tg-loop-qty.is-busy {
	opacity: .55;
	pointer-events: none;
}

/*
 * Woostify renders loop buttons at various widths depending on the card layout.
 * Matching the sibling button's block behaviour keeps the grid tidy.
 */
.woocommerce ul.products li.product .tg-loop-qty,
.products .product .tg-loop-qty {
	display: flex;
}

@media (max-width: 782px) {
	.tg-loop-qty { --tg-lq-h: 42px; }
	.tg-loop-qty__btn { flex-basis: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.tg-loop-qty,
	.tg-loop-qty__btn { transition: none; }
}

/* -------------------------------------------------------------------------
 * Hide the "View cart" link WooCommerce appends to product cards
 *
 * After an AJAX add, wc-add-to-cart.js injects
 *   <a class="added_to_cart wc-forward">View cart</a>
 * directly after the button. With the card now showing a quantity stepper that
 * link is redundant clutter next to it.
 *
 * SCOPING MATTERS: target `a.added_to_cart`, NOT `.wc-forward`. The mini-cart
 * drawer's own "View cart" and "Checkout" buttons also carry .wc-forward but
 * NOT .added_to_cart. Broadening this selector would silently remove the only
 * way out of the mini-cart.
 *
 * CSS hides it instantly (no flash); loop-qty.js then removes it from the DOM.
 * ---------------------------------------------------------------------- */

a.added_to_cart { display: none !important; }