/*
 * Product Page Mobile Add-to-Cart Redesign Experiment
 * Loaded after the existing product-page stylesheet.
 */

@media (max-width: 767.98px) {
	/* Shared variant cleanup */
	html[data-product-page-mobile-cart-variant]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> span {
		display: none !important;
	}

	html[data-product-page-mobile-cart-variant]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group {
		flex-wrap: nowrap;
	}

	html[data-product-page-mobile-cart-variant]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		input {
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	html[data-product-page-mobile-cart-variant]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		button {
		position: relative;
		box-shadow: none !important;
		font-size: 0 !important;
	}

	/* Crisp custom plus/minus icons */
	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-decrease::before,
	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-increase::before,
	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-increase::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		display: block;
		background: currentColor;
		border-radius: 999px;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-decrease::before,
	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-increase::before {
		width: 14px;
		height: 1.5px;
	}

	html[data-product-page-mobile-cart-variant]
		#mobile-quantity-increase::after {
		width: 1.5px;
		height: 14px;
	}

	/* =====================================================
	   TEST: Orange outlined quantity control
	   ===================================================== */
	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart {
		padding: 6px 22px !important;
		gap: 0;
	}

	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart
		.quantity {
		flex: 0 0 92px;
	}

	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group {
		height: 35px;
		border: 2px solid var(--accent-color-orange);
		border-radius: 4px 0 0 4px;
		overflow: hidden;
		background: #fff;
	}

	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		button {
		width: 30px;
		height: 31px;
		padding: 0;
		border: 0 !important;
		background: #fff !important;
		color: var(--accent-color-orange) !important;
	}

	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		input {
		width: 30px;
		height: 31px;
		padding: 0;
		border: 0 !important;
		background: #fff;
		font-size: 20px;
		font-weight: 400;
		text-align: center;
	}

	html[data-product-page-mobile-cart-variant="test"]
		.prod-mobile-quantity-add-to-cart
		.add-to-cart-button {
		flex: 1 1 auto;
		width: auto;
		height: 35px;
		margin-left: 2px;
		border-radius: 0 4px 4px 0;
	}

	/* =====================================================
	   TEST-2: Compact grey quantity control
	   ===================================================== */
	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart {
		padding: 6px 8px !important;
		gap: 6px;
	}

	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart
		.quantity {
		flex: 0 0 106px;
	}

	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group {
		height: 35px;
		border: 1px solid #c8c8c8;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
	}

	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		button {
		width: 22px;
		height: 33px;
		padding: 0 16px;
		border: 0 !important;
		background: #fff !important;
		color: #555 !important;
	}

	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart
		.quantity
		> .input-group
		input {
		width: 28px;
		height: 33px;
		padding: 0;
		border: 0 !important;
		background: #fff;
		font-size: 20px;
		font-weight: 400;
		text-align: center;
	}

	html[data-product-page-mobile-cart-variant="test-2"]
		.prod-mobile-quantity-add-to-cart
		.add-to-cart-button {
		flex: 1 1 auto;
		width: auto;
		height: 35px;
		margin-left: 0;
		border-radius: 4px;
		padding: 2px 5px;
		font-size: 20px;
	}
}