/*
 * Storefront: product-card quantity control + "Added to cart" sheet tweaks.
 * The quantity control copies the classes of the card's own Add to cart
 * button, so it inherits the theme's exact colours, height, radius and font;
 * these rules only lay out its − qty + parts.
 */

/* Card in cart: the hover-only add area becomes permanently visible. */
.ch-cf-in-cart {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
.ch-cf-qty-hidden { display: none !important; }

.ch-cf-qty {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 0 4px !important;
	position: relative;
	cursor: default;
	user-select: none;
	box-sizing: border-box;
	text-decoration: none !important;
}
.ch-cf-qty__btn {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 34px; height: 34px; margin: 0; padding: 0;
	border: 0; border-radius: 8px; background: transparent; color: inherit;
	cursor: pointer; transition: background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.ch-cf-qty__btn:hover:not(:disabled) { background: rgba(127, 127, 127, .22); }
.ch-cf-qty__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.ch-cf-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.ch-cf-qty__val {
	flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap;
	font-variant-numeric: tabular-nums; transition: opacity .15s ease;
}
.ch-cf-qty__val b { font-weight: 700; }
.ch-cf-qty.is-busy .ch-cf-qty__val { opacity: .45; }
.ch-cf-qty.is-busy .ch-cf-qty__btn { pointer-events: none; }
.ch-cf-qty__msg {
	position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
	padding: 6px 8px; border-radius: 8px; text-align: center; white-space: normal;
	font: 500 12px/1.35 var(--itd-font, system-ui, sans-serif);
	background: var(--itd-ink, #0B0D12); color: #fff; box-shadow: 0 6px 18px rgba(11, 13, 18, .18);
}

/* The theme draws a "+" / "✓" glyph with ::before on phone card buttons. */
.ch-cf-qty::before,
.ch-cf-qty::after { content: none !important; display: none !important; }

/* Touch screens: bigger tap targets. */
@media (pointer: coarse) {
	.ch-cf-qty__btn { width: 38px; height: 38px; }
}

/* Phones (theme ≤767px turns the home-card button into a 34px round "+" in the
   corner). In cart, that corner button becomes a full-width rounded bar. */
@media (max-width: 767px) {
	.itd-hm-card__add.ch-cf-in-cart {
		left: 8px !important; right: 8px !important; bottom: 8px !important;
		width: auto !important; height: auto !important;
	}
	.itd-body .itd-hm-card__btn.ch-cf-qty,
	.itd-hm-card__btn.ch-cf-qty {
		width: 100% !important; height: 38px !important; padding: 0 3px !important;
		border-radius: 999px !important; font-size: 15px !important; line-height: 1 !important;
	}
	.itd-hm-card__btn.ch-cf-qty .ch-cf-qty__btn { width: 32px; height: 32px; border-radius: 50%; }
	.ch-cf-qty__msg { font-size: 11px; }
}

/* "Added to cart" panel: quantity control before the price — same look as
   the cart page's own bordered − 1 + box. */
.ch-cf-sheet-qtyline { display: block; margin: 6px 0 4px; }
.ch-cf-qty.ch-cf-qty--sheet {
	display: inline-flex !important; width: auto; min-width: 116px; height: 40px;
	padding: 0 3px !important; gap: 2px;
	border: 1px solid var(--itd-line-2, #DADDE4); border-radius: 10px; background: #fff;
	color: var(--itd-ink, #0B0D12); font: 600 15px/1 var(--itd-font, system-ui, sans-serif);
}
.ch-cf-qty--sheet .ch-cf-qty__btn { width: 34px; height: 34px; }
.ch-cf-qty--sheet .ch-cf-qty__btn:hover:not(:disabled) { background: var(--itd-soft, #F5F6F8); }
.ch-cf-qty--sheet .ch-cf-qty__val { min-width: 28px; }
.ch-cf-qty--sheet .ch-cf-qty__msg { bottom: auto; top: calc(100% + 6px); }
@media (pointer: coarse) {
	.ch-cf-qty.ch-cf-qty--sheet { height: 44px; }
	.ch-cf-qty--sheet .ch-cf-qty__btn { width: 40px; height: 40px; }
}

/* "Added to cart" sheet: no "View cart" link; Keep shopping fills the row. */
.ch-cf-sheet-no-cart .itd-sheet__cart { display: none !important; }
.ch-cf-sheet-no-cart .itd-sheet__row > .itd-btn,
.ch-cf-sheet-row--single > * { flex: 1 1 100%; width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.ch-cf-qty__btn, .ch-cf-qty__val { transition: none; }
}