/*
 * NeoGrow product page - parent-theme overrides.
 *
 * Loaded last. Everything here exists because the Electro parent theme styles
 * the same elements and was winning the cascade on the live store. Measured on
 * a real product page before this file existed:
 *
 *   .single_add_to_cart_button   background rgb(51,62,72)  text rgb(15,79,82)
 *                                -> contrast 1.18:1, effectively invisible
 *   .ngpp-buy-now                background rgb(239,236,236)
 *                                -> read as a disabled control, not a CTA
 *   .ngpp-buy-now                396px wide inside a 390px viewport
 *
 * A dark-on-dark primary button is why the purchase controls were reported as
 * "not working": nothing was broken, the button simply could not be read.
 *
 * `!important` is used deliberately and only on the handful of properties that
 * decide whether a call to action is legible. Scoped to `.ngpp-layout`, so it
 * cannot leak to Electro's buttons anywhere else on the site.
 */

/* -------------------------------------------------------------------------
 * Primary: Add to cart
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-layout form.cart button.single_add_to_cart_button,
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button {
	background: var(--ngpp-primary, #34dde4) !important;
	background-image: none !important;
	color: var(--ngpp-deep, #0f4f52) !important;
	border: 0 !important;
	border-radius: var(--ngpp-r-md, 12px) !important;
	box-shadow: var(--ngpp-e1) !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

body.ngpp-engine .ngpp-layout button.single_add_to_cart_button:hover:not(.disabled):not([disabled]),
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button:focus-visible:not(.disabled):not([disabled]) {
	background: #24c4cb !important;
	color: var(--ngpp-deep, #0f4f52) !important;
}

/*
 * WooCommerce marks the button `.disabled.wc-variation-selection-needed` until
 * every attribute is chosen. That state must look deliberately inert -- not
 * like the primary button with a slightly different tint, and not like a
 * broken control either.
 */
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button.disabled,
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button[disabled],
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button.wc-variation-selection-needed {
	background: var(--ngpp-surface-sunken, #eef4f5) !important;
	color: var(--ngpp-muted, #4f6265) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* Electro attaches an icon font to `.button.alt`; it renders as a stray "a". */
body.ngpp-engine .ngpp-layout button.single_add_to_cart_button::before,
body.ngpp-engine .ngpp-layout .ngpp-buy-now::before {
	content: none !important;
}

/* -------------------------------------------------------------------------
 * Secondary: Buy now
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-layout button.ngpp-buy-now,
body.ngpp-engine .ngpp-layout .ngpp-buy-now {
	background: var(--ngpp-dark, #101718) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--ngpp-r-md, 12px) !important;
	text-shadow: none !important;

	/*
	 * Measured 396px inside a 390px viewport: Electro sets a horizontal margin
	 * on `.button`, which added to a 100% width and pushed the page 6px wide.
	 */
	max-width: 100% !important;
	margin-inline: 0 !important;
	box-sizing: border-box !important;
}

body.ngpp-engine .ngpp-layout .ngpp-buy-now:hover,
body.ngpp-engine .ngpp-layout .ngpp-buy-now:focus-visible {
	background: #24343a !important;
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * Mobile purchase bar
 *
 * Sits outside `.ngpp-layout` (it is printed in wp_footer), so it needs its
 * own scope.
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-mobile-bar .ngpp-mobile-bar__button {
	background: var(--ngpp-primary, #34dde4) !important;
	background-image: none !important;
	color: var(--ngpp-deep, #0f4f52) !important;
	border: 0 !important;
	border-radius: var(--ngpp-r-md, 12px) !important;
	text-shadow: none !important;
}

body.ngpp-engine .ngpp-mobile-bar .ngpp-mobile-bar__button.is-blocked {
	background: var(--ngpp-surface-sunken, #eef4f5) !important;
	color: var(--ngpp-muted, #4f6265) !important;
}

/* -------------------------------------------------------------------------
 * Quantity field
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-layout form.cart .quantity .qty {
	min-height: 52px !important;
	border: 1px solid var(--ngpp-line-strong, #ccd8da) !important;
	border-radius: var(--ngpp-r-md, 12px) !important;
	background: #fff !important;
	color: var(--ngpp-dark, #101718) !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
 * "Choose an option" prompt
 *
 * Rendered by Renderer::variation_hint() and now actually fired by every
 * layout. It is the explanation the disabled button was missing.
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-layout .ngpp-variation-hint {
	display: flex;
	align-items: flex-start;
	gap: var(--ngpp-s2, 8px);
	margin: 0 0 var(--ngpp-s3, 12px);
	padding: var(--ngpp-s3, 12px);
	border: 1px solid var(--ngpp-line, #e3eaec);
	border-inline-start: 3px solid var(--ngpp-primary, #34dde4);
	border-radius: var(--ngpp-r-md, 12px);
	background: var(--ngpp-surface, #f7fafb);
	color: var(--ngpp-text, #35484b);
	font-size: var(--ngpp-t-small, 13px);
	font-weight: 600;
	line-height: 1.5;
}

/* Once a valid variation exists the prompt has done its job. */
body.ngpp-engine .ngpp-layout.is-variation-chosen .ngpp-variation-hint {
	display: none;
}

/* -------------------------------------------------------------------------
 * Overflow guard
 *
 * No control inside the product stage may exceed its column.
 * ---------------------------------------------------------------------- */

body.ngpp-engine .ngpp-layout form.cart,
body.ngpp-engine .ngpp-layout form.cart * {
	max-width: 100%;
}

body.ngpp-engine .ngpp-layout form.cart {
	box-sizing: border-box;
}