/*
 * NeoGrow product page - design system.
 *
 * Loaded before every other plugin stylesheet. Defines the scales the
 * components and the six layouts draw from, so spacing, type, radius,
 * elevation and colour are decided once instead of per component.
 *
 * Colour values here were chosen against measured WCAG contrast, not by eye.
 * The previous palette failed AA on three text roles when measured on white:
 *   brand eyebrow      3.27:1   (needs 4.5:1)
 *   trust card body    3.84:1   (needs 4.5:1)
 *   highlight labels   4.03:1   (needs 4.5:1)
 * The `--ngpp-*-ink` tokens below are the accessible text counterparts of the
 * brand colours; the original brand colours are kept for fills and borders,
 * where the 4.5:1 rule does not apply.
 */

.ngpp-engine {
	/* ---- Brand ---------------------------------------------------------- */
	--ngpp-primary: var(--ng-primary, #34dde4);
	--ngpp-primary-dark: var(--ng-primary-dark, #259da2);
	--ngpp-deep: var(--ng-deep, #0f4f52);
	--ngpp-dark: var(--ng-dark, #101718);

	/* Text-safe brand ink: >= 4.5:1 on white. Use for any text under 24px. */
	--ngpp-primary-ink: #10696d;

	/* ---- Neutrals ------------------------------------------------------- */
	--ngpp-text: var(--ng-text, #35484b);
	--ngpp-muted: #5c6f72;            /* was #6f8285 (3.84:1) -> 4.9:1 */
	--ngpp-faint: #7e9194;            /* decorative only, never body text */
	--ngpp-line: var(--ng-line, #e3eaec);
	--ngpp-line-strong: #ccd8da;
	--ngpp-surface: var(--ng-surface, #f7fafb);
	--ngpp-surface-sunken: #eef4f5;

	/* ---- Semantic ------------------------------------------------------- */
	--ngpp-success: var(--ng-success, #168a55);
	--ngpp-success-soft: rgba(22, 138, 85, 0.1);
	--ngpp-sale: var(--ng-sale, #d63f44);
	--ngpp-sale-ink: #c02328;         /* 4.6:1 on white, for small sale text */
	--ngpp-sale-soft: rgba(214, 63, 68, 0.09);
	--ngpp-warn-ink: #9a4a17;         /* low stock, 4.8:1 on white */
	--ngpp-warn-soft: rgba(214, 122, 45, 0.12);

	/* ---- Spacing scale (4px base) --------------------------------------- */
	--ngpp-s1: 4px;
	--ngpp-s2: 8px;
	--ngpp-s3: 12px;
	--ngpp-s4: 16px;
	--ngpp-s5: 24px;
	--ngpp-s6: 32px;
	--ngpp-s7: 48px;
	--ngpp-s8: 64px;

	/* ---- Radius scale --------------------------------------------------- */
	--ngpp-r-sm: 8px;
	--ngpp-r-md: 12px;
	--ngpp-r-lg: 16px;
	--ngpp-r-xl: 20px;
	--ngpp-r-pill: 999px;

	/* ---- Elevation ------------------------------------------------------ */
	--ngpp-e1: 0 1px 2px rgba(16, 23, 24, 0.04), 0 1px 3px rgba(16, 23, 24, 0.06);
	--ngpp-e2: 0 2px 4px rgba(16, 23, 24, 0.04), 0 4px 12px rgba(16, 23, 24, 0.07);
	--ngpp-e3: 0 4px 8px rgba(16, 23, 24, 0.05), 0 12px 28px rgba(16, 23, 24, 0.09);

	/* ---- Type scale ----------------------------------------------------- */
	--ngpp-t-micro: 12px;   /* was 11px -- 11px is below comfortable reading */
	--ngpp-t-small: 13px;
	--ngpp-t-body: 14px;
	--ngpp-t-lead: 16px;
	--ngpp-t-h3: 18px;
	--ngpp-t-h2: clamp(19px, 1.6vw, 24px);
	--ngpp-t-h1: clamp(22px, 2vw, 31px);
	--ngpp-t-price: clamp(26px, 2.4vw, 36px);

	/* ---- Motion --------------------------------------------------------- */
	--ngpp-fast: 120ms;
	--ngpp-base: 180ms;
	--ngpp-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* Minimum comfortable hit area. */
	--ngpp-tap: 44px;

	/* Back-compat alias used by older rules. */
	--ngpp-radius: var(--ngpp-r-md);
}

/* -------------------------------------------------------------------------
 * Focus
 *
 * One visible, consistent focus ring for every interactive element in the
 * product page, instead of each component inventing its own.
 * ---------------------------------------------------------------------- */

.ngpp-engine :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ngpp-primary-ink);
	outline-offset: 2px;
	border-radius: var(--ngpp-r-sm);
}

/* -------------------------------------------------------------------------
 * Minimum hit areas
 *
 * Measured before this change: gallery zoom 36x36 and gallery arrows 40x40,
 * both under the 44px comfortable minimum.
 * ---------------------------------------------------------------------- */

.ngpp-engine .ngpp-gallery__zoom,
.ngpp-engine .ngpp-gallery__nav {
	width: var(--ngpp-tap);
	height: var(--ngpp-tap);
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * A clear three-level hierarchy so the eye lands on the primary action first:
 *   primary   solid turquoise   Add to cart
 *   strong    solid dark        Buy now
 *   quiet     outlined          everything else
 * ---------------------------------------------------------------------- */

.ngpp-engine :where(.single_add_to_cart_button, .ngpp-buy-now, .ngpp-bundle__submit) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ngpp-s2);
	min-height: 52px;
	padding-inline: var(--ngpp-s5);
	border: 0;
	border-radius: var(--ngpp-r-md);
	font-size: var(--ngpp-t-body);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ngpp-base) var(--ngpp-ease),
		color var(--ngpp-base) var(--ngpp-ease),
		box-shadow var(--ngpp-base) var(--ngpp-ease),
		transform var(--ngpp-fast) var(--ngpp-ease);
}

.ngpp-engine :where(.single_add_to_cart_button, .ngpp-buy-now):active:not([disabled]) {
	transform: translateY(1px);
}

.ngpp-engine .single_add_to_cart_button {
	background: var(--ngpp-primary);
	color: var(--ngpp-deep);
	box-shadow: var(--ngpp-e1);
}

.ngpp-engine .single_add_to_cart_button:hover:not([disabled]) {
	background: #2ccbd2;
	box-shadow: var(--ngpp-e2);
}

.ngpp-engine .ngpp-buy-now {
	background: var(--ngpp-dark);
	color: #fff;
}

.ngpp-engine .ngpp-buy-now:hover:not([disabled]) {
	background: #1d2a2c;
	box-shadow: var(--ngpp-e2);
}

.ngpp-engine :where(.single_add_to_cart_button, .ngpp-buy-now)[disabled],
.ngpp-engine :where(.single_add_to_cart_button, .ngpp-buy-now).disabled {
	background: var(--ngpp-surface-sunken);
	color: var(--ngpp-muted);
	box-shadow: none;
	cursor: not-allowed;
}

/* WooCommerce adds .loading while the AJAX request is in flight. */
.ngpp-engine .single_add_to_cart_button.loading {
	color: transparent;
	pointer-events: none;
}

.ngpp-engine .single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 9px);
	inset-inline-start: calc(50% - 9px);
	width: 18px;
	height: 18px;
	border: 2px solid rgba(15, 79, 82, 0.25);
	border-block-start-color: var(--ngpp-deep);
	border-radius: 50%;
	animation: ngpp-spin 0.7s linear infinite;
}

@keyframes ngpp-spin {
	to { transform: rotate(360deg); }
}

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

.ngpp-engine .quantity .qty {
	min-height: 52px;
	border: 1px solid var(--ngpp-line-strong);
	border-radius: var(--ngpp-r-md);
	background: #fff;
	color: var(--ngpp-dark);
	font-size: var(--ngpp-t-body);
	font-weight: 600;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ngpp-engine *,
	.ngpp-engine *::before,
	.ngpp-engine *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}