/*
 * Bag corrections.
 *
 * `approved-cascade.css` already owns the bag drawer, its head, the item grid,
 * the empty state, the subtotal and the checkout button — this file adds only
 * what a live cart needs on top of that approved chrome, and nothing here
 * restates an approved rule except to undo `.bag-item button`'s blanket
 * underline/margin where the new stepper would inherit it.
 */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Quantity stepper: same Arial voice as `.bag-note`, no underlined buttons. */
.bag-qty {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.bag-item .bag-qty-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 0;
	padding: 0;
	border: 1px solid var(--ug-line);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: 15px/1 Arial, Helvetica, sans-serif;
	text-decoration: none;
	cursor: pointer;
}

.bag-item .bag-qty-step:hover,
.bag-item .bag-qty-step:focus-visible {
	border-color: var(--ug-iris);
	background: var(--ug-iris);
	color: #fff;
}

.bag-item .bag-qty-step:disabled {
	opacity: .3;
	cursor: not-allowed;
}

.bag-item .bag-qty-step:disabled:hover {
	border-color: var(--ug-line);
	background: transparent;
	color: inherit;
}

.bag-qty-value {
	min-width: 2.5ch;
	font: 14px/1 Arial, Helvetica, sans-serif;
	text-align: center;
	letter-spacing: .02em;
}

/* `[ REMOVE ]` keeps the bracket voice of `[ EDIT YOUR BAG ]`. */
.bag-remove {
	margin: 10px 0 0;
}

.bag-item .bag-remove button {
	margin-top: 0;
	color: var(--ug-muted);
	font: 11px/1.2 Arial, Helvetica, sans-serif;
	letter-spacing: .06em;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.bag-item .bag-remove button:hover,
.bag-item .bag-remove button:focus-visible {
	color: var(--ug-iris);
}

/* One row of the panel is being replaced; keep the pointer honest. */
[data-scene="bag"][aria-busy="true"] {
	cursor: progress;
}

@media (max-width: 760px) {
	.bag-qty {
		gap: 8px;
		margin-top: 12px;
	}

	.bag-item .bag-qty-step {
		width: 26px;
		height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bag-item .bag-qty-step {
		transition: none;
	}
}
/* White Bag surfaces need the dark accent; Search retains yellow on purple. */
.bag-item .search-price,
.bag-item .search-price span,
.bag-item .bag-remove button { color: var(--ug-iris, #5630a6); }
.bag-item .bag-remove button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }