/**
 * CrusadeCthulhu WooCommerce: quantity stepper.
 *
 *     ( − )  [ 1 ]  ( + )
 *
 * Buttons are display:none here. inc/wc-quantity.php adds one inline rule
 * that turns them on inside the targeted Divi Woo modules only, so the scope
 * list has a single source (the ccc_qty_scopes filter).
 *
 * Customise with the custom properties on .quantity, from Divi's Custom CSS
 * or the child style.css, e.g.
 *
 *     .quantity { --ccc-qty-bg: #ff6f61; --ccc-qty-fg: #fff; }
 *
 * State classes set by the script:
 *     .ccc-qty--on        wrapper the script has taken over
 *     .ccc-qty--locked    variable product, no purchasable variation chosen (field readonly)
 *     .ccc-qty--static    sold individually / readonly / disabled: no buttons
 */

.quantity {
	--ccc-qty-size: 44px;          /* WCAG 2.5.5 AAA / Apple HIG target */
	--ccc-qty-gap: 8px;
	--ccc-qty-radius: 50%;
	--ccc-qty-bg: #f2f2f2;
	--ccc-qty-bg-hover: #e6e6e6;
	--ccc-qty-bg-active: #dcdcdc;
	--ccc-qty-fg: #141414;
	--ccc-qty-border: transparent;
	--ccc-qty-focus: #141414;
	--ccc-qty-glyph-size: 22px;
	--ccc-qty-input-width: 110px;
	--ccc-qty-input-height: 56px;
	--ccc-qty-input-bg: #e9e9e9;
	--ccc-qty-input-border: transparent;
}

/* Cart column is narrow: square bordered group, buttons flush to the field. */
.woocommerce-cart-form .quantity,
td.product-quantity .quantity {
	--ccc-qty-size: 44px;
	--ccc-qty-gap: 0px;
	--ccc-qty-radius: 0;
	--ccc-qty-bg: #fff;
	--ccc-qty-bg-hover: #f5f5f5;
	--ccc-qty-border: #ddd;
	--ccc-qty-glyph-size: 18px;
	--ccc-qty-input-width: 44px;
	--ccc-qty-input-height: 44px;
	--ccc-qty-input-bg: #f3f3f3;
	--ccc-qty-input-border: #ddd;
}

.woocommerce-cart-form .quantity .ccc-qty__btn--minus,
td.product-quantity .quantity .ccc-qty__btn--minus {
	width: 32px;
	min-width: 32px;
}

.woocommerce-cart-form .quantity .ccc-qty__btn--plus,
td.product-quantity .quantity .ccc-qty__btn--plus {
	width: 32px;
	min-width: 32px;
}

.woocommerce-cart-form .quantity input.qty,
td.product-quantity .quantity input.qty {
	border-left: 0;
	border-right: 0;
}

/* Off by default; the inline scope rule from PHP turns these on. */
.quantity .ccc-qty__btn {
	display: none;
}

/* Layout when the buttons are on (also set by the inline scope rule). */
.quantity.ccc-qty--on {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-qty-gap);
	flex-wrap: nowrap;
}

/* WooCommerce's screen-reader label lives inside .quantity; keep it out of the flex row. */
.quantity > label.screen-reader-text {
	position: absolute;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity.ccc-qty--on input.qty {
	-moz-appearance: textfield;
	appearance: textfield;
	text-align: center;
	font-size: 16px;  /* 16px+ stops iOS zooming on focus */
	width: var(--ccc-qty-input-width);
	min-width: var(--ccc-qty-input-width);
	height: var(--ccc-qty-input-height);
	min-height: var(--ccc-qty-input-height);
	margin: 0;
	border: 1px solid var(--ccc-qty-input-border);
	border-radius: 0;
	background: var(--ccc-qty-input-bg);
	flex: 0 1 auto;
}

.quantity .ccc-qty__btn {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--ccc-qty-size);
	height: var(--ccc-qty-size);
	min-width: var(--ccc-qty-size);
	min-height: var(--ccc-qty-size);
	padding: 0;
	margin: 0;
	border: 1px solid var(--ccc-qty-border);
	border-radius: var(--ccc-qty-radius);
	background: var(--ccc-qty-bg);
	color: var(--ccc-qty-fg);
	font-size: var(--ccc-qty-glyph-size);
	font-weight: 400;
	line-height: 1;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
	text-transform: none;   /* Divi styles buttons broadly */
	letter-spacing: normal;
}

.quantity .ccc-qty__btn:hover:not([disabled]) {
	background: var(--ccc-qty-bg-hover);
}

.quantity .ccc-qty__btn:active:not([disabled]) {
	background: var(--ccc-qty-bg-active);
}

.quantity .ccc-qty__btn:focus-visible {
	outline: 2px solid var(--ccc-qty-focus);
	outline-offset: 2px;
}

.quantity .ccc-qty__btn[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.quantity .ccc-qty__icon {
	pointer-events: none;
	display: block;
}

/* Locked: buttons stay in place so choosing a variation does not shift layout;
   the field is readonly and dimmed to match. */
.quantity.ccc-qty--locked .ccc-qty__btn,
.quantity.ccc-qty--locked input.qty {
	cursor: not-allowed;
}

.quantity.ccc-qty--locked input.qty {
	opacity: 0.5;
}

/* Sold individually, readonly or disabled: nothing to step. !important so this
   state wins over the inline scope rule, which has the same specificity. */
.quantity.ccc-qty--static .ccc-qty__btn {
	display: none !important;
}

/* Live region: clipped, not display:none, so it stays in the accessibility tree. */
.quantity .ccc-qty__announce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.quantity .ccc-qty__btn {
		transition: none;
	}
}