.zhc-variable-quote-cta[hidden],
.zhc-variable-quote-prompt[hidden] {
	display: none !important;
}

/* Only the Add to cart button goes away when the selection is quote-only. The
   quantity box stays: a quote is a request for a stated amount, and hiding the
   control left the shopper no way to say how much they wanted.

   The :has() selector keys off data-quote-mode, which PHP renders - so on a
   wholly quote-only product the button is hidden by the server-delivered CSS
   alone, with no flash before JS runs and no dependency on it running at all.
   The .zhc-full-quote-product class (added by JS) stays as the fallback for
   browsers without :has(). */
body.woocommerce div.product .summary form.variations_form.zhc-selected-quote-variation .variations_button > .single_add_to_cart_button,
body.woocommerce div.product .summary form.variations_form.zhc-full-quote-product .variations_button > .single_add_to_cart_button {
	display: none !important;
}

/* Kept as its OWN rule on purpose: a browser that does not support :has()
   discards the entire rule containing it, fallback selectors included. In a
   shared list the class-based hiding above would die with it - the second
   review caught exactly that inversion. */
body.woocommerce div.product .summary form.variations_form:has(.zhc-variable-quote-control[data-quote-mode="full"]) .variations_button > .single_add_to_cart_button {
	display: none !important;
}

.zhc-simple-quote-control {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 1em;
}

/* Everything that makes the store's quantity box look and behave like the
   store's quantity box lives in arterary/style.css behind a `form.cart`
   ancestor, and a quote-only simple product has no cart form. Inheriting was
   never going to happen, so mirror that treatment here for this one box.
   Values copied from arterary/style.css (the .summary form.cart .quantity
   block); keep them in step if that block changes.

   The 16px on the input is not cosmetic: iOS Safari zooms a focused control
   under 16px and never zooms back out, which is the trap round 22 closed. The
   50px width is not cosmetic either - at the theme's 1.6em the content box is
   25.6px and a shopper cannot see the "100" they just typed, on the one field
   whose whole purpose is stating an amount. */
.zhc-simple-quote-control .zhc-quote-quantity {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid var(--global-palette7, #d5d8dc);
	border-radius: 4px;
	display: inline-flex;
	float: none;
	height: 40px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: auto;
}

.zhc-simple-quote-control .zhc-quote-quantity .qty {
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--global-palette3, #333);
	font-size: 16px;
	height: 38px;
	margin: 0;
	padding: 0;
	text-align: center;
	/* !important because the theme's spinner script adds .spinners-added and
	   avanam then sizes the input at (0,4,0) with width:1.6em - 25.6px, which
	   cannot show "100". The store's own 50px rule is form.cart-scoped and
	   !important; this is the same declaration for the same control. */
	width: 50px !important;
}

.zhc-simple-quote-control .zhc-quote-quantity .minus,
.zhc-simple-quote-control .zhc-quote-quantity .plus {
	align-items: center;
	background: #ffffff;
	border: none;
	color: #666;
	cursor: pointer;
	display: flex;
	font-size: 16px;
	font-weight: normal;
	height: 38px;
	justify-content: center;
	user-select: none;
	width: 30px;
}

.zhc-simple-quote-control .zhc-quote-quantity .minus:hover,
.zhc-simple-quote-control .zhc-quote-quantity .plus:hover {
	background-color: #f5f5f5;
	color: #000;
}

.variations_button > .zhc-variable-quote-control {
	align-items: center;
	clear: none;
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	width: auto;
}

.zhc-variable-quote-control {
	align-items: center;
	display: flex;
}

.zhc-variable-quote-prompt {
	align-items: center;
	color: #52667d;
	display: flex;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
	min-height: 40px;
}

.zhc-variable-quote-cta {
	align-items: center;
	display: flex;
	margin: 0;
}

.woocommerce div.product .summary .zhc-quote-button {
	align-items: center;
	background: var(--global-palette1, #274c77);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	height: 40px;
	justify-content: center;
	line-height: 40px;
	margin: 0;
	padding: 0 25px;
	transition: background-color 180ms ease, box-shadow 180ms ease;
}

.woocommerce div.product .summary .zhc-quote-button:hover,
.woocommerce div.product .summary .zhc-quote-button:focus-visible {
	background: var(--global-palette2, #1b365d);
	box-shadow: 0 4px 12px rgba(39, 76, 119, 0.2);
	color: #fff;
}

/* The variations table shrink-to-fits its widest option, so a long label sizes
   the control past the column and then past the viewport: measured 503px (vial
   rack, 64-char label) and 556px (merged spec labels). The width declaration is
   what breaks the intrinsic-width circularity - max-width alone resolves against
   a cell that is itself sized by the option text, so it changes nothing. The
   browser now clips the label instead of the layout.

   Scoped to 1024px, not to phones, because that is exactly the band where the
   theme sets overflow-x: hidden on html and body (arterary/style.css). Measured
   at 768px before this rule: the select is 556px wide and ends at x=919 in a
   753px viewport, and the clipping swallows 166px of it with no scrollbar - the
   right end of the control is unreachable rather than merely ugly. Above 1024px
   the summary column widens enough to hold it (588px at 1100px viewport) and the
   page can scroll anyway, so desktop is left alone. */
@media screen and (max-width: 1024px) {
	html body.single-product.woocommerce div.product .summary table.variations td.value select {
		max-width: 100%;
		width: 100%;
	}
}

/* The add-to-cart row has the same band problem. It is a nowrap flex line, and
   between 576px and 1024px nothing lets it break: at 768px its children need
   402px inside a 362px row, so the quote control ran 40px past the summary
   column and overflow-x: hidden ate the tail of "Select an option to request a
   quote". The squeeze also crushed the quantity spinner to 2px wide - a control
   the customer cannot see, let alone use.

   The phone block below solves this with a two-column grid; tablets only need
   permission to wrap, which takes !important because the theme pins the row to
   flex-wrap: nowrap !important. The quote control then drops onto a line of its
   own - at its natural 254px, not the full column - and the quantity spinner
   comes back at 112px. flex-shrink/min-width are the allowance for a column
   narrower than the control's natural width; at 768px nothing needs to shrink.

   No lower bound on purpose. An earlier version opened at min-width: 576px,
   which left widths strictly between 575px and 576px - reachable by browser
   zoom - matching neither block and falling back to the theme's nowrap. Below
   576px the phone block switches the row to display: grid, where flex-wrap and
   flex-shrink are inert, so letting this rule reach down costs nothing.

   Both blocks say "screen and" because the theme rule whose band they mirror is
   @media screen and (max-width: 1024px); a bare max-width would also fire on
   paper, where 1024px is a plausible width and nowrap was never the bug. */
@media screen and (max-width: 1024px) {
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button {
		flex-wrap: wrap !important;
	}

	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button > .zhc-variable-quote-control {
		flex-shrink: 1;
		min-width: 0;
	}
}

@media (max-width: 575px) {
	html body.single-product.woocommerce div.product .summary form.variations_form.cart {
		max-width: 100%;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary form.variations_form.cart > .single_variation_wrap {
		max-width: 100%;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary form.cart:not(.variations_form),
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button {
		align-items: center;
		box-sizing: border-box;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
		max-width: 100%;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary form.cart:not(.variations_form) > .quantity,
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button > .quantity {
		grid-column: 1 / -1 !important;
		margin: 0;
		min-width: 0 !important;
		width: 112px !important;
	}

	html body.single-product.woocommerce div.product .summary form.cart:not(.variations_form) > .single_add_to_cart_button,
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button {
		float: none;
		grid-column: 1 !important;
		margin: 0;
		min-width: 0 !important;
		padding-inline: 12px;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary form.cart:not(.variations_form) > .zhc-quote-button,
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button > .zhc-variable-quote-control {
		grid-column: 2 !important;
		margin: 0;
		min-width: 0 !important;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary .zhc-variable-quote-cta {
		min-width: 0 !important;
		width: 100% !important;
	}

	html body.single-product.woocommerce div.product .summary .zhc-quote-button {
		min-width: 0 !important;
		padding-inline: 12px !important;
		width: 100% !important;
	}

	/* Quote-only selections hide Add to cart, which leaves column 1 of the
	   button row empty and strands Request a Quote alone in column 2, hard
	   against the right edge. With nothing to sit beside, it takes the row. */
	html body.single-product.woocommerce div.product .summary form.variations_form.zhc-full-quote-product .variations_button > .zhc-variable-quote-control,
	html body.single-product.woocommerce div.product .summary form.variations_form.zhc-selected-quote-variation .variations_button > .zhc-variable-quote-control {
		grid-column: 1 / -1 !important;
	}

	/* A quote-only simple product's quantity box is outside form.cart, so the
	   rule above that sizes the store's own box misses it; at its natural width
	   the theme's -/+ stepper wraps and the + drops onto a second line. Give it
	   the same 112px, and let the button take what is left. */
	.zhc-simple-quote-control .zhc-quote-quantity {
		flex: 0 0 auto;
	}

	.zhc-simple-quote-control .zhc-quote-button {
		flex: 1 1 auto;
		min-width: 0;
		padding-inline: 12px;
	}

	/* The mirror of the rule above: on a mixed product nothing is selected yet,
	   so the quote CTA is hidden and its grid cell is empty, leaving Add to cart
	   at half width beside a blank. With no CTA beside it, it takes the row. */
	html body.single-product.woocommerce div.product .summary form.cart .woocommerce-variation-add-to-cart.variations_button:has(> .zhc-variable-quote-control > .zhc-variable-quote-cta[hidden]) > .single_add_to_cart_button {
		grid-column: 1 / -1 !important;
	}
}

/* Spam trap. Out of the visual and accessibility trees, so a person never
   reaches it and a script that fills every input gives itself away. */
.zhc-quote-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}