/* =========================================================
   TGH PRODUCT OPTIONS
   Storefront Child Theme
   Version: 1.0.1

   Bao gồm:
   - Variation buttons
   - Selected / disabled variation
   - Quantity - / +
   - Quantity tách riêng khỏi nhóm nút mua
   - Add to Cart
   - Buy Now
   - Responsive
   ========================================================= */


/* =========================================================
   1. VARIATION / ATTRIBUTE
   ========================================================= */

.single-product table.variations {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}

.single-product table.variations tr {
	display: block;
	margin: 0 0 18px;
}

.single-product table.variations th.label {
	display: block;
	width: 100%;
	padding: 0 0 9px;
	text-align: left;
}

.single-product table.variations th.label label {
	color: #19392a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}


/* =========================================================
   2. SELECT GỐC CỦA WOOCOMMERCE
   Giữ lại để WooCommerce xử lý Variation.
   ========================================================= */

.single-product .tgh-variation-select-hidden {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	padding: 0 !important;
	margin: -1px !important;

	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;

	white-space: nowrap !important;

	border: 0 !important;
}


/* =========================================================
   3. KHUNG NÚT VARIATION
   ========================================================= */

.tgh-variation-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	margin: 0;
}


/* =========================================================
   4. NÚT SIZE / ATTRIBUTE
   ========================================================= */

.tgh-variation-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 72px;
	min-height: 42px;

	padding: 9px 15px;

	border: 1px solid #d6dfda;
	border-radius: 7px;

	background: #ffffff;
	color: #19392a;

	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;

	cursor: pointer;

	box-sizing: border-box;

	box-shadow: none;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		opacity 0.18s ease;
}


/* Hover */

.tgh-variation-button:hover {
	border-color: #19392a;

	background: #f5f8f6;

	color: #19392a;
}


/* Đang chọn */

.tgh-variation-button.is-selected {
	border-color: #19392a;

	background: #19392a;

	color: #ffffff;
}


/* Disabled */

.tgh-variation-button.is-disabled {
	opacity: 0.4;

	cursor: not-allowed;

	text-decoration: line-through;
}


/* =========================================================
   5. RESET VARIATION
   ========================================================= */

.single-product .reset_variations {
	display: inline-block;

	margin-top: 8px;

	color: #19392a;

	font-size: 13px;

	text-decoration: underline;
}


/* =========================================================
   6. KHU VỰC CART
   ========================================================= */

/*
 * Quantity nằm một hàng riêng.
 *
 * Hai nút:
 * Add to Cart
 * Buy Now
 *
 * nằm chung một hàng bên dưới.
 */

.single-product div.product form.cart {
	display: flex !important;

	flex-wrap: wrap !important;

	align-items: center !important;

	gap: 12px !important;

	width: 100%;
}


/* =========================================================
   7. QUANTITY
   ========================================================= */

.single-product div.product form.cart .quantity {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto !important;

	width: fit-content !important;
	height: 48px;

	margin: 0 0 4px !important;

	border: 1px solid #d6dfda;

	border-radius: 8px;

	background: #ffffff;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   8. NÚT QUANTITY - / +
   ========================================================= */

.single-product div.product form.cart .tgh-qty-minus,
.single-product div.product form.cart .tgh-qty-plus {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	width: 42px;
	height: 46px;

	padding: 0 !important;
	margin: 0 !important;

	border: 0 !important;

	border-radius: 0 !important;

	background: #f5f8f6 !important;

	color: #19392a !important;

	font-family: inherit;

	font-size: 19px;

	font-weight: 500;

	line-height: 1;

	cursor: pointer;

	box-shadow: none !important;

	outline: none;
}


.single-product div.product form.cart .tgh-qty-minus:hover,
.single-product div.product form.cart .tgh-qty-plus:hover {
	background: #eaf1ed !important;

	color: #19392a !important;
}


/* =========================================================
   9. Ô SỐ LƯỢNG
   ========================================================= */

.single-product div.product form.cart .quantity .qty {
	width: 46px !important;

	height: 46px !important;

	padding: 0 !important;

	margin: 0 !important;

	border: 0 !important;

	border-radius: 0 !important;

	background: #ffffff !important;

	color: #19392a !important;

	font-family: inherit;

	font-size: 14px;

	font-weight: 600;

	line-height: 46px;

	text-align: center;

	box-shadow: none !important;

	outline: none;
}


/* =========================================================
   10. XÓA MŨI TÊN INPUT NUMBER
   ========================================================= */

.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button {
	margin: 0;

	-webkit-appearance: none;
}


.single-product div.product form.cart .quantity .qty {
	-moz-appearance: textfield;
}


/* =========================================================
   11. HAI NÚT MUA
   ========================================================= */

/*
 * Add to Cart + Buy Now
 * luôn nằm chung một nhóm bên dưới Quantity.
 */

.single-product div.product form.cart button.single_add_to_cart_button,
.single-product div.product form.cart a.tgh-buy-now-btn {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	flex: 1 1 0 !important;

	min-width: 0;

	height: 48px;

	padding: 12px 18px !important;

	margin: 0 !important;

	border-radius: 8px !important;

	font-family: inherit;

	font-size: 14px !important;

	font-weight: 600 !important;

	line-height: 1.2;

	text-align: center;

	text-decoration: none !important;

	box-sizing: border-box;

	box-shadow: none !important;

	outline: none;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}


/* =========================================================
   12. THÊM VÀO GIỎ HÀNG
   ========================================================= */

.single-product div.product form.cart button.single_add_to_cart_button {
	background: #19392a !important;

	border: 1px solid #19392a !important;

	color: #ffffff !important;
}


.single-product div.product form.cart button.single_add_to_cart_button:hover {
	background: #10271d !important;

	border-color: #10271d !important;

	color: #ffffff !important;
}


/* =========================================================
   13. MUA NGAY
   ========================================================= */

.single-product div.product form.cart a.tgh-buy-now-btn {
	background: #a78368 !important;

	border: 1px solid #a78368 !important;

	color: #ffffff !important;
}


.single-product div.product form.cart a.tgh-buy-now-btn:hover {
	background: #8e6c52 !important;

	border-color: #8e6c52 !important;

	color: #ffffff !important;
}


/* =========================================================
   14. DISABLED / CHƯA CHỌN VARIATION
   ========================================================= */

.single-product div.product form.cart button.single_add_to_cart_button.disabled,
.single-product div.product form.cart button.single_add_to_cart_button:disabled {
	opacity: 0.55;

	cursor: not-allowed;
}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.single-product table.variations {
		margin-bottom: 15px;
	}


	/* Variation buttons */

	.tgh-variation-buttons {
		gap: 7px;
	}


	.tgh-variation-button {
		min-width: 68px;

		min-height: 40px;

		padding: 8px 13px;

		font-size: 13px;
	}


	/* Cart */

	.single-product div.product form.cart {
		gap: 10px !important;
	}


	/* Quantity */

	.single-product div.product form.cart .quantity {
		height: 46px;

		margin-bottom: 2px !important;
	}


	.single-product div.product form.cart .tgh-qty-minus,
	.single-product div.product form.cart .tgh-qty-plus {
		width: 40px;

		height: 44px;
	}


	.single-product div.product form.cart .quantity .qty {
		width: 42px !important;

		height: 44px !important;

		line-height: 44px;
	}


	/* Hai nút mua xuống riêng từng hàng */

	.single-product div.product form.cart button.single_add_to_cart_button,
	.single-product div.product form.cart a.tgh-buy-now-btn {
		flex: 1 1 100% !important;

		width: 100% !important;

		height: 48px;
	}
}


/* =========================================================
   16. MÀN HÌNH RẤT NHỎ
   ========================================================= */

@media (max-width: 380px) {

	.tgh-variation-button {
		min-width: 64px;

		padding-left: 11px;
		padding-right: 11px;
	}

	.single-product div.product form.cart {
		gap: 8px !important;
	}
}