.wc-block-components-button[data-grande-order-limits-disabled="true"],
.wc-block-components-button.is-disabled[aria-disabled="true"],
.checkout-button[data-grande-order-limits-disabled="true"],
.checkout-button.is-disabled[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}

/* Keep product-card quick-add buttons on a common baseline across a row.
   The grid already stretches sibling cards to equal height, but the button
   otherwise follows the title in normal flow, so a two-line title drops its
   button below the one-line cards'. Lay the card out as a flex column and let
   the button claim the slack above it: margin-top:auto grabs vertical space
   only when the card is taller than its content, acting as the spacer between
   the title and the quick-add button. CSS-only so we never touch the
   Blocks-hydrated button node. */
.facetwp-template li.product {
	display: flex;
	flex-direction: column;
}

.facetwp-template li.product .wc-block-components-product-button {
	margin-top: auto;
}

/* Suppress the post-add "View cart" link WooCommerce reveals inside the product
   button after a successful add to cart. We only want the quick-add control,
   wherever a product button appears — the FacetWP grid, the checkout "Best
   Selling Products" block, related products, etc. (not just the grid). The link
   sits in an otherwise class-less <span> that is a direct child of the button
   wrapper; hide the container span (the button's own label span is nested inside
   the <button>, so it is unaffected) plus the link itself as a safety net. */
.wc-block-components-product-button > span,
.wc-block-components-product-button .added_to_cart,
.wc-block-components-product-button .wc-forward {
	display: none !important;
}

/* Gate the checkout "Place Order" button on the Terms & Conditions checkbox.
   WooCommerce Blocks leaves the button clickable and validates terms on submit;
   we overlay a disabled appearance until the box is checked. Driven entirely by
   <body> classes toggled from the checkbox state, so the button's own (React-
   owned) attributes are never touched. */
body.grande-order-limits-terms-required:not(.grande-order-limits-terms-accepted) .wc-block-components-checkout-place-order-button {
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}

/* Product-card add-to-cart button at the limit, and the cart/mini-cart
   increase-quantity (+) button that has not yet been validated as allowed. */
.add_to_cart_button[data-grande-order-limits-disabled="true"],
.ajax_add_to_cart[data-grande-order-limits-disabled="true"],
.button[data-grande-order-limits-disabled="true"],
.wc-block-components-quantity-selector__button--plus[data-grande-order-limits-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}

/* Product-card add-to-cart button at the limit shows "Max reached" via CSS so
   we never overwrite the Blocks button's own (Interactivity-rendered) label.
   The data attribute is set by the plugin JS; the store does not manage it. */
/* Collapse the Blocks button's native label (color transparent + font-size 0 so
   it contributes no width) and render "Max reached" as in-flow ::after content.
   The button then sizes to that text plus its own horizontal padding, so the
   padding is consistent regardless of the store-rendered native label
   ("1 in cart", "2 in cart", "Add to cart", ...). The store never manages our
   attribute or the pseudo-element, so it can't be clobbered. */
.add_to_cart_button[data-grande-order-limits-max-text],
.add_to_cart_button[data-grande-order-limits-max-text] *,
.wc-block-components-product-button__button[data-grande-order-limits-max-text],
.wc-block-components-product-button__button[data-grande-order-limits-max-text] *,
.single_add_to_cart_button[data-grande-order-limits-max-text],
.single_add_to_cart_button[data-grande-order-limits-max-text] * {
	color: transparent !important;
	font-size: 0 !important;
}

/* Pin the brand background while we manage the button (validating spinner or
   blocked). After a quick add WooCommerce briefly restyles the button to a light
   "added / View cart" state; without this the white "Max reached" text / white
   spinner would sit on a white background (invisible). */
.add_to_cart_button[data-grande-order-limits-max-text],
.add_to_cart_button[data-grande-order-limits-validating="true"],
.wc-block-components-product-button__button[data-grande-order-limits-max-text],
.wc-block-components-product-button__button[data-grande-order-limits-validating="true"],
.single_add_to_cart_button[data-grande-order-limits-max-text],
.single_add_to_cart_button[data-grande-order-limits-validating="true"] {
	background-color: #34657f !important;
	border-color: #34657f !important;
}

.add_to_cart_button[data-grande-order-limits-max-text]::after,
.wc-block-components-product-button__button[data-grande-order-limits-max-text]::after,
.single_add_to_cart_button[data-grande-order-limits-max-text]::after {
	content: attr(data-grande-order-limits-max-text) !important;
	color: #fff !important;
	font-size: 1.0892rem;
}

/* Progress spinner shown on a product-card add-to-cart button while its limit
   state is being validated. Driven by a data attribute + a CSS-only spinner
   (no child node/class the Interactivity store could wipe on hydration), so the
   progress state reliably shows from page load until validation resolves. */
.add_to_cart_button[data-grande-order-limits-validating="true"],
.add_to_cart_button[data-grande-order-limits-validating="true"] *,
.wc-block-components-product-button__button[data-grande-order-limits-validating="true"],
.wc-block-components-product-button__button[data-grande-order-limits-validating="true"] *,
.single_add_to_cart_button[data-grande-order-limits-validating="true"],
.single_add_to_cart_button[data-grande-order-limits-validating="true"] * {
	color: transparent !important;
}

.add_to_cart_button[data-grande-order-limits-validating="true"],
.wc-block-components-product-button__button[data-grande-order-limits-validating="true"],
.single_add_to_cart_button[data-grande-order-limits-validating="true"] {
	position: relative;
}

.add_to_cart_button[data-grande-order-limits-validating="true"]::after,
.wc-block-components-product-button__button[data-grande-order-limits-validating="true"]::after,
.single_add_to_cart_button[data-grande-order-limits-validating="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	/* translate(-50%, -50%) centers on the top/left 50% point using the rendered
	   size (border included), so the 2px border can't push it off-center. The
	   spin is combined here so the rotate doesn't override the centering. */
	animation: grande-order-limits-spin 0.7s linear infinite;
}

@keyframes grande-order-limits-spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.wc-block-components-button.grande-order-limits-is-validating,
.wc-block-cart__submit-button.grande-order-limits-is-validating,
.checkout-button.grande-order-limits-is-validating {
	position: relative;
}

.wc-block-components-button.grande-order-limits-is-validating .wc-block-components-button__text,
.wc-block-cart__submit-button.grande-order-limits-is-validating,
.checkout-button.grande-order-limits-is-validating {
	color: transparent !important;
}

.wc-block-components-button.grande-order-limits-is-validating::after,
.wc-block-cart__submit-button.grande-order-limits-is-validating::after,
.checkout-button.grande-order-limits-is-validating::after {
	visibility: hidden;
}

.wc-block-components-button.grande-order-limits-is-validating .grande-order-limits-spinner,
.wc-block-cart__submit-button.grande-order-limits-is-validating .grande-order-limits-spinner,
.checkout-button.grande-order-limits-is-validating .grande-order-limits-spinner {
	color: #fff;
	display: block;
	opacity: 1;
	visibility: visible;
}

.grande-order-limits-mini-cart-notices {
	margin: 2rem 1rem 1rem;
}

.wc-block-mini-cart__drawer .wc-block-components-notices,
.wc-block-mini-cart__drawer > .wc-block-components-notice-banner,
.wp-block-woocommerce-mini-cart-contents > .wc-block-components-notice-banner {
	display: none;
}

.wc-block-mini-cart__drawer .grande-order-limits-mini-cart-notices {
	display: block;
}

.grande-order-limits-cart-notices {
	box-sizing: border-box;
	flex-basis: 100%;
	margin: 1rem 0;
	width: 100%;
}

/*
 * Hides React-managed Blocks notices that duplicate our own injected notice.
 * We hide rather than remove because detaching a React-owned node crashes the
 * cart; an attribute change is safe (the observer is childList-only).
 */
.grande-order-limits-hidden-notice {
	display: none !important;
}

/*
 * The WooCommerce notice banner defaults to a 1px `currentColor` border on the
 * top/right/bottom edges, which renders near-black behind the rounded corners.
 * Force a uniform red border and clip to the radius so no dark edge shows.
 */
.grande-order-limits-cart-notices .wc-block-components-notice-banner.is-error {
	border: 2px solid #d71920;
	border-radius: 6px;
	overflow: hidden;
}

.grande-order-limits-mini-cart-notices .wc-block-components-notice-banner {
	align-items: flex-start;
	box-sizing: border-box;
	margin: 0;
	width: auto;
}

.grande-order-limits-mini-cart-notices .wc-block-components-notice-banner > svg {
	flex: 0 0 auto;
	margin-top: 0.15rem;
}

.grande-order-limits-mini-cart-notices .wc-block-components-notice-banner__content {
	align-self: flex-start;
}

.grande-order-limits-mini-cart-notices .wc-block-components-notice-banner__content p {
	margin: 0;
}

.grande-order-limits-summary {
	color: var(--wp--preset--color--accent-2, #008756);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 0.5rem 0 0;
	text-align: center;
}

.wc-block-cart-item__product .grande-order-limits-summary,
.wc-block-mini-cart-item__product .grande-order-limits-summary,
.wc-block-components-order-summary-item__description .grande-order-limits-summary {
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

/* Per-row "Maximum quantity reached" message shown in the cart and mini-cart
   when a product's current-order or historical limit is reached. */
.grande-order-limits-max-notice {
	color: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0.35rem 0 0;
}

.grande-order-limits-invalid-item {
	background: #fff5f5;
	box-shadow: inset 4px 0 0 #d71920, inset -4px 0 0 #d71920;
}

.grande-order-limits-invalid-item > td,
.grande-order-limits-invalid-item > th,
.grande-order-limits-invalid-item .wc-block-cart-item__product,
.grande-order-limits-invalid-item .wc-block-cart-item__total,
.grande-order-limits-invalid-item .wc-block-components-order-summary-item__description {
	background: #fff5f5;
}

.wc-block-mini-cart-items .grande-order-limits-invalid-item,
.wp-block-woocommerce-mini-cart-items-block .grande-order-limits-invalid-item {
	border-radius: 4px;
	box-sizing: border-box;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

.wc-block-cart-items .grande-order-limits-invalid-item,
.wp-block-woocommerce-cart-items-block .grande-order-limits-invalid-item {
	border-radius: 4px;
}

.wc-block-components-button[data-grande-order-limits-disabled="true"]::after,
.wc-block-components-button.is-disabled[aria-disabled="true"]::after,
.checkout-button[data-grande-order-limits-disabled="true"]::after,
.checkout-button.is-disabled[aria-disabled="true"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='16' viewBox='0 0 21 16' fill='none'%3E%3Cpath d='M1.5 7C0.947715 7 0.5 7.44772 0.5 8C0.5 8.55228 0.947715 9 1.5 9V7ZM20.2071 8.70711C20.5976 8.31658 20.5976 7.68342 20.2071 7.29289L13.8431 0.928932C13.4526 0.538408 12.8195 0.538408 12.4289 0.928932C12.0384 1.31946 12.0384 1.95262 12.4289 2.34315L18.0858 8L12.4289 13.6569C12.0384 14.0474 12.0384 14.6805 12.4289 15.0711C12.8195 15.4616 13.4526 15.4616 13.8431 15.0711L20.2071 8.70711ZM1.5 9H19.5V7H1.5V9Z' fill='%23a7bdc8'/%3E%3C/svg%3E") !important;
}

.wc-block-components-button[data-grande-order-limits-disabled="true"]:hover,
.wc-block-components-button[data-grande-order-limits-disabled="true"]:focus,
.wc-block-components-button.is-disabled[aria-disabled="true"]:hover,
.wc-block-components-button.is-disabled[aria-disabled="true"]:focus,
.checkout-button[data-grande-order-limits-disabled="true"]:hover,
.checkout-button[data-grande-order-limits-disabled="true"]:focus,
.checkout-button.is-disabled[aria-disabled="true"]:hover,
.checkout-button.is-disabled[aria-disabled="true"]:focus {
	box-shadow: none;
	filter: none;
	transform: none;
}
