/**
 * PDP adaptive wash (T10.4).
 *
 * Loaded only on `is_product()`. No pixel analysis. No `--adaptive`.
 * Paint is confined to `.po-product__hero`. Intensity tokens live on
 * `main.po-product` so missing inline styles still resolve.
 *
 * Layers (T10.7): solid hero; 2 radials on ::before; veil on ::after.
 * No exit-fade plate. No background / blur / blend transitions (MV-PDP-01).
 * will-change only while `.po-product__hero--swap` is on.
 * T15.5: mixes 16/55 and shorter clamps at ≤820 (T10.6); smaller area at ≤400.
 * Palette hex (`--po-product-color-*`) is never rewritten here.
 */

.po-product.po-main,
main.po-product {
	--po-product-wash-primary-mix: 22%;
	--po-product-wash-secondary-mix: 70%;
	--po-product-wash-veil-mix: var(--po-product-wash-safe-veil, 92%);
	--po-product-wash-primary-size: clamp(18rem, 40vw + 12rem, 36rem);
	--po-product-wash-secondary-size: clamp(14rem, 32vw + 10rem, 28rem);
	--po-product-wash-primary-x: 12%;
	--po-product-wash-primary-y: -10%;
	--po-product-wash-secondary-x: 100%;
	--po-product-wash-secondary-y: 0%;
	--po-product-wash-primary-fade: 58%;
	--po-product-wash-secondary-fade: 55%;
	--po-product-wash-glow: 0px;
	--po-product-wash-glow-alpha: 0%;
	--po-product-ink: var(--po-color-text);
	--po-product-ink-muted: var(--po-color-muted);
	--po-product-stroke: var(--po-color-border);
	--po-product-focus-color: var(--po-color-focus);
	--po-product-wash-duration: var(--po-dur-fast, 180ms);
	--po-product-wash-ease: var(--po-ease);
}

.po-product__hero {
	position: relative;
	isolation: isolate;
	min-width: 0;
	padding-block-end: var(--po-space-inset, 2.5rem);
	border-radius: 0;
	color: var(--po-color-text);
	--po-product-wash-cap-primary: 22%;
	--po-product-wash-cap-secondary: 70%;
	--po-product-wash-primary-mix: min(var(--po-product-wash-cap-primary), calc(var(--po-product-wash-guard-primary, 22) * 1%));
	--po-product-wash-secondary-mix: min(var(--po-product-wash-cap-secondary), calc(var(--po-product-wash-guard-secondary, 70) * 1%));
	--po-product-wash-veil-mix: min(96%, calc(var(--po-product-wash-guard-veil, 92) * 1%));
	background-color: var(--po-color-background);
}

.po-product__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	contain: paint;
	background-image:
		radial-gradient(
			var(--po-product-wash-primary-size, 120%) 80% at var(--po-product-wash-primary-x, 12%) var(--po-product-wash-primary-y, -10%),
			color-mix(in srgb, var(--po-product-color-primary) var(--po-product-wash-primary-mix, 22%), transparent) 0%,
			transparent var(--po-product-wash-primary-fade, 58%)
		),
		radial-gradient(
			var(--po-product-wash-secondary-size, 80%) 70% at var(--po-product-wash-secondary-x, 100%) var(--po-product-wash-secondary-y, 0%),
			color-mix(in srgb, var(--po-product-color-secondary) var(--po-product-wash-secondary-mix, 70%), transparent) 0%,
			transparent var(--po-product-wash-secondary-fade, 55%)
		);
	background-repeat: no-repeat;
	opacity: 1;
}

.po-product__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: color-mix(in srgb, var(--po-color-background) var(--po-product-wash-veil-mix, 92%), transparent);
}

@media (prefers-reduced-motion: no-preference) and (min-width: 821px) and (hover: hover) {
	.po-product__hero::before {
		animation: po-wash-in var(--po-product-wash-duration, 180ms) var(--po-product-wash-ease, ease) 1;
	}

	.po-product__hero.po-product__hero--swap::before {
		will-change: opacity;
		animation-name: po-wash-swap;
	}
}

@keyframes po-wash-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes po-wash-swap {
	from {
		opacity: 0.7;
	}

	to {
		opacity: 1;
	}
}

@media (max-width: 820px) {
	.po-product.po-main,
	main.po-product {
		--po-product-wash-primary-mix: 16%;
		--po-product-wash-secondary-mix: 55%;
		--po-product-wash-primary-size: clamp(12rem, 62vw, 20rem);
		--po-product-wash-secondary-size: clamp(10rem, 52vw, 16rem);
	}

	.po-product__hero {
		--po-product-wash-cap-primary: 16%;
		--po-product-wash-cap-secondary: 55%;
	}
}

@media (max-width: 400px) {
	.po-product.po-main,
	main.po-product {
		--po-product-wash-primary-size: clamp(10rem, 72vw, 16rem);
		--po-product-wash-secondary-size: clamp(8rem, 62vw, 14rem);
	}
}

@media (min-width: 1440px) {
	.po-product.po-main,
	main.po-product {
		--po-product-wash-primary-size: clamp(22rem, 28vw, 40rem);
		--po-product-wash-secondary-size: clamp(18rem, 22vw, 32rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.po-product.po-main,
	main.po-product,
	.po-product__hero {
		--po-product-wash-duration: 0s;
	}

	.po-product__hero {
		transition: none;
	}

	.po-product__hero::before {
		animation: none;
	}
}

@media (prefers-contrast: more) {
	.po-product.po-main,
	main.po-product,
	.po-product__hero {
		--po-product-wash-primary-mix: 0%;
		--po-product-wash-secondary-mix: 0%;
		--po-product-wash-glow-alpha: 0%;
	}

	.po-product__hero::before {
		opacity: 0;
	}

	.po-product__hero::after {
		background-image: none;
		background: var(--po-color-background);
	}
}

@supports not (background: color-mix(in srgb, #000 10%, transparent)) {
	.po-product__hero {
		background-color: var(--po-color-background);
		background-image: none;
	}

	.po-product__hero::before,
	.po-product__hero::after {
		content: none;
		background: none;
	}
}

@media (forced-colors: active) {
	.po-product__hero {
		background: Canvas;
		background-image: none;
	}

	.po-product__hero::before,
	.po-product__hero::after {
		content: none;
		background: none;
		animation: none;
	}
}

@media print {
	.po-product__hero {
		background: none;
		background-image: none;
		box-shadow: none;
		padding-block-end: 0;
	}

	.po-product__hero::before,
	.po-product__hero::after {
		content: none;
		background: none;
		animation: none;
	}
}

/*
 * T10.5 locks — reading, focus and conversion stay on DS tokens.
 * Product palette never paints chrome. Information is never color-only.
 */
.po-product .summary .product_title,
.po-product .summary h1,
.po-product__hero .summary .price,
.po-product__hero .summary .price .amount,
.po-product__hero .summary .price ins {
	color: var(--po-color-text);
}

.po-product .po-breadcrumbs--product,
.po-product .po-breadcrumbs--product a,
.po-product .woocommerce-review-link,
.po-product .po-product__sku,
.po-product .woocommerce-product-details__short-description,
.po-product table.variations .label,
.po-product table.variations .label label,
.po-product .reset_variations {
	color: var(--po-color-muted);
}

.po-product .po-breadcrumbs--product a:hover,
.po-product .woocommerce-review-link:hover,
.po-product .reset_variations:hover {
	color: var(--po-color-text);
}

.po-product .single_add_to_cart_button,
.po-product button.single_add_to_cart_button {
	background: var(--po-gradient-cta);
	color: var(--po-color-text);
}

.po-product span.onsale {
	background: var(--po-color-lime);
	color: var(--po-color-background);
}

.po-product .stock.in-stock,
.po-product .po-status--in {
	color: var(--po-color-lime);
}

.po-product .stock.out-of-stock,
.po-product .po-status--out {
	color: var(--po-color-danger);
}

.po-product .woocommerce-error,
.po-product .woocommerce-notices-wrapper .woocommerce-error {
	color: var(--po-color-error);
	background: var(--po-color-surface);
	border-color: var(--po-color-error);
}

.po-product .woocommerce-message,
.po-product .woocommerce-notices-wrapper .woocommerce-message {
	color: var(--po-color-text);
	background: var(--po-color-surface);
	border-color: var(--po-color-success);
}

.po-product .woocommerce-info,
.po-product .woocommerce-notices-wrapper .woocommerce-info {
	color: var(--po-color-text);
	background: var(--po-color-surface);
	border-color: var(--po-color-alert);
}

.po-product :is(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

.po-product :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--po-color-focus);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.po-product :is(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
		outline: 3px solid Highlight;
	}
}