/**
 * Trang chi tiết sản phẩm.
 *
 * Nút Size Guide (inc/single-product.php) là thẻ <a> chứ không phải <button> nên
 * CSS của Blocksy Companion Pro - chỉ nhắm vào `.ct-product-additional-actions
 * button` - không áp vào. Khai báo lại đúng các rule đó để nút trông y như cũ.
 */

.ct-product-additional-actions a.bch-size-guide-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--theme-text-color);
	background: transparent;
	text-decoration: none;
	transition: var(--theme-transition);
}

.ct-product-additional-actions[data-type='link'] a.bch-size-guide-link:hover {
	color: var(--theme-link-hover-color);
}

.ct-product-additional-actions[data-type='button'] a.bch-size-guide-link {
	height: 40px;
	min-width: 40px;
	padding: 5px 15px;
	border: 1px solid var(--theme-border-color);
	border-radius: var(--theme-button-border-radius, 3px);
}

.ct-product-additional-actions[data-type='button'] a.bch-size-guide-link:hover {
	color: var(--theme-button-text-initial-color);
	border-color: var(--theme-button-background-initial-color);
	background-color: var(--theme-button-background-initial-color);
}

.ct-product-additional-actions a.bch-size-guide-link:hover .ct-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, -50px, 0);
}

/* ==========================================================================
   Nút Buy Now (inc/buy-now.php)
   --------------------------------------------------------------------------
   Nằm cùng hàng flex .ct-cart-actions với ô số lượng (--item-order: 1) và nút
   Add to cart (--item-order: 2). Blocksy đặt width mặc định 100% cho mọi con
   của hàng này, nên phải cho flex: 1 giống nút Add to cart thì hai nút mới chia
   đôi chỗ trống thay vì mỗi nút chiếm trọn một dòng.
   ========================================================================== */

.ct-cart-actions .bch-buy-now {
	--item-order: 3;
	flex: 1;

	/* Màu đậm để tách khỏi nút Add to cart (màu nhấn của theme): hai nút cạnh
	   nhau cùng màu thì khách khó nhận ra đây là hai hành động khác nhau. */
	--theme-button-text-initial-color: var(--theme-palette-color-8, #fff);
	--theme-button-text-hover-color: var(--theme-palette-color-8, #fff);
	--theme-button-background-initial-color: var(--theme-palette-color-4, #131117);
	--theme-button-background-hover-color: var(--theme-palette-color-3, #687279);
}

/* Bỏ trần chiều rộng của nút để hàng lấp kín chiều ngang.
   --------------------------------------------------------------------------
   Customizer của Blocksy đặt --theme-button-max-width: 30% lên form.cart
   (xem wp-content/uploads/blocksy/css/global.css). Trần đó hợp lý khi hàng chỉ
   có một nút, nhưng với hai nút thì 30% + 30% + ô số lượng vẫn hụt so với bề
   ngang cột, để lại khoảng trắng bên phải; còn ở điện thoại thì nút bị bóp đến
   mức chữ "Add to cart" phải xuống hai dòng.

   Tách làm hai rule: :has() mà trình duyệt không hiểu thì cả nhóm selector bị
   bỏ, nên rule của .bch-buy-now phải đứng riêng để không chết theo. */
.ct-cart-actions .bch-buy-now {
	max-width: none;
}

/* Chỉ nới nút Add to cart khi hàng thực sự có thêm nút Buy Now - sản phẩm nào
   không hiện Buy Now thì giữ nguyên trần 30% như thiết lập Customizer. */
.ct-cart-actions:has(.bch-buy-now) .single_add_to_cart_button {
	max-width: none;
}

/* Điện thoại: Buy Now xuống hẳn một dòng riêng, chiếm trọn chiều ngang - hai
   nút đứng cạnh nhau ở khổ này thì hẹp tới mức chữ bị cắt. Dùng đúng breakpoint
   Blocksy đang dùng cho hàng .ct-cart-actions. */
@media (max-width: 479.98px) {
	.ct-cart-actions .bch-buy-now {
		flex: 1 0 100%;
	}
}

/* Sản phẩm variable: chưa chọn đủ thuộc tính thì Woo khoá nút Add to cart bằng
   class trên khối .woocommerce-variation-add-to-cart. Khoá nút Buy Now theo. */
.woocommerce-variation-add-to-cart-disabled .bch-buy-now {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}