/* ─────────── WooCommerce Quantity & Add-to-Cart Restyle ─────────── */

/* Dynamic total price element */
.wc-qty-total-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.wc-qty-total-price__label {
	font-size: 13px;
	font-weight: 600;
	color: #666;
}

.wc-qty-total-price .price {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	font-weight: 700;
	color: #e85d04;
}

.wc-qty-total-price__note {
	font-size: 12px;
	color: #666;
	line-height: 1.35;
	max-width: 320px;
}

/*
 * 已显示「估算总价」时隐藏 WooCommerce 随后注入的 .woocommerce-variation-price，不依赖 setTimeout。
 * 需支持 :has() 的浏览器；旧浏览器仍靠 JS（show_variation + renderTotal 内隐藏）。
 */
form.variations_form .single_variation_wrap:has( > .wc-qty-total-price.wc-qty-total-price--active )
	.woocommerce-variation-price {
	display: none !important;
}

/* wrapper */
.cs-product-cart-warp .wc-qty-wrap {
	display: flex;
	flex-wrap: wrap;
}

.cs-product-cart-warp .wc-qty-wrap__label {
	font-size: 13px;
	color: #666;
	font-weight: 500;
	width: 100%;
	margin-bottom: 10px;
}
.cs-product-cart-warp .wc-qty-wrap .input-text.qty.text {
    height: 36px !important;
}

/* quantity row */
.cs-product-cart-warp .wc-qty-wrap .quantity {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	height: 40px;
	width: auto;
}

.cs-product-cart-warp .wc-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	background: #fff;
	border: none;
	font-size: 18px;
	color: #333;
	cursor: pointer;
	user-select: none;
	padding: 0;
	line-height: 1;
	transition: background .15s;
}
.cs-product-cart-warp .wc-qty-btn:hover {
	background: #f5f5f5;
}

.cs-product-cart-warp .wc-qty-wrap .quantity input.qty {
	width: 44px;
	height: 100%;
	border: none;
	border-left: 1.5px solid #ddd;
	border-right: 1.5px solid #ddd;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
	outline: none;
	padding: 0;
	margin: 0;
}
.cs-product-cart-warp .wc-qty-wrap .quantity input.qty::-webkit-inner-spin-button,
.cs-product-cart-warp .wc-qty-wrap .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* action buttons row */
.single-product form.cart {
	display: flex !important;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

/* cart icon button (replaces text "Add to cart") */
.single_add_to_cart_button:not([name="buy-now"]){
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 16px !important;
	border-radius: 24px !important;
	background: #333 !important;
	color: #fff !important;
	border: none !important;
	font-size: 0 !important;
	cursor: pointer;
	transition: background .2s;
	height:46px;
}
.single_add_to_cart_button:hover {
	background: #1a1a1a !important;
}
.single_add_to_cart_button:not([name="buy-now"])::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 22px;
}

/* "Buy Now" button */
.buy-now-button,
a.buy-now-button,
button.buy-now-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 28px !important;
	border-radius: 24px !important;
	background: #ff6a00 !important;
	color: #fff !important;
	border: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s;
}
.buy-now-button:hover,
a.buy-now-button:hover,
button.buy-now-button:hover {
	background: #e65c00 !important;
}

/* ── Responsive ── */

@media (max-width: 480px) {
	form.cart {
		gap: 8px;
	}
	.single_add_to_cart_button {
		min-width: 46px !important;
		height: 40px;
	}
	.buy-now-button,
	a.buy-now-button,
	button.buy-now-button {
		height: 40px;
		padding: 0 20px !important;
		font-size: 14px !important;
	}
}

.single_variation_wrap .quantity .wc-qty-wrap button.wc-qty-btn {
    background: unset;
    padding: 0;
    color: #222;
    height: 36px;
    border: 1px solid #222;
    margin: 0 !important;
    border-radius: 0;
}
.single_variation_wrap .quantity .input-text.qty.text{
    border: 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    border-radius: 0;
}

.single_variation_wrap .quantity .wc-qty-wrap button.wc-qty-btn.wc-qty-btn--plus {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.single_variation_wrap .quantity .wc-qty-wrap button.wc-qty-btn.wc-qty-btn--minus {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

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

/* Firefox */
.single_variation_wrap .quantity .input-text.qty.text[type=number] {
  -moz-appearance: textfield;
}