/*
 * Design v4: interaction states (Lane K, K-6, 23 Oct 2026). No flag: a bug fix in the v4 layer, like K-1.
 *
 * Root cause: some v4 rules repaint a component's colour with a selector that is more specific than the component's own
 * :hover / :focus rule (for example `body.eup-ds4 .eup-shop .eup-shop__apply`, 0,3,1, against shop-v2's
 * `.eup-shop .eup-shop__apply:hover`, 0,3,0). On hover the component's background still changes, but the v4 colour
 * wins, so the label disappears (ink on ink). This sheet gives each such override its own hover, focus-visible and active
 * states, one step more specific, in the v4 language (design-v4-components.css `.eup-ds4-btn--*`):
 *   - outline / secondary buttons fill with ink (#1d1848) and take a white label;
 *   - coral CTA buttons deepen to --eup3-cta-hover with the ink label;
 *   - links shift colour or thicken their underline;
 *   - focus-visible: a 3 px ink ring, 2 px offset (white on dark fills).
 * Hover colours apply on devices that hover; focus and active everywhere. Transitions are short and off under
 * prefers-reduced-motion. Loaded last of the v4 sheets (inc/enqueue-design-v4.php). Audit: research workspace
 * research/internal/release/2026-10-18/round-3/lane-k/k6/AUDIT.md.
 */

/* ---------- Shop rail: "Filters" toggle and "Apply price" (shop-v2.css:415 vs design-v4-pages.css:150) ---------- */
body.eup-ds4 .eup-shop .eup-shop__rail-toggle,
body.eup-ds4 .eup-shop .eup-shop__apply {
	transition:
		background-color var(--eup3-dur-instant, 90ms) ease,
		border-color var(--eup3-dur-instant, 90ms) ease,
		color var(--eup3-dur-instant, 90ms) ease;
}

/* Not inside a hover media query: shop-v2's own :hover is not either, and a tap leaves :hover on touch screens. */
body.eup-ds4 .eup-shop .eup-shop__rail-toggle:hover,
body.eup-ds4 .eup-shop .eup-shop__apply:hover,
body.eup-ds4 .eup-shop .eup-shop__rail-toggle:focus,
body.eup-ds4 .eup-shop .eup-shop__apply:focus,
body.eup-ds4 .eup-shop .eup-shop__rail-toggle:active,
body.eup-ds4 .eup-shop .eup-shop__apply:active {
	background: var(--eup3-ink, #1d1848);
	border-color: var(--eup3-ink, #1d1848);
	color: var(--eup3-ground, #ffffff);
}

body.eup-ds4 .eup-shop .eup-shop__rail-toggle:focus-visible,
body.eup-ds4 .eup-shop .eup-shop__apply:focus-visible {
	outline: 3px solid var(--eup3-focus, #1d1848);
	outline-offset: 2px;
}

/* ---------- Cookie banner text buttons: view preferences and do-not-sell (consent.css:266/320 vs
 * design-v4-system.css:688). No contrast failure, but the v4 colour (1,5,1) beats the banner's hover colour (1,4,0), so
 * hovering showed no change at all. Link language (as .eup-ds4-btn--ghost:hover): the underline thickens to 2 px and the
 * soft do-not-sell label turns ink. ---------- */
@media (hover: hover) and (pointer: fine) {
	body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
	body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi:hover {
		background: none;
		color: var(--eup3-ink, #1d1848);
		text-decoration-line: underline;
		text-decoration-thickness: 2px;
	}
}

body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus-visible,
body.eup-ds4 #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi:focus-visible {
	outline: 3px solid var(--eup3-focus, #1d1848);
	outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	body.eup-ds4 .eup-shop .eup-shop__rail-toggle,
	body.eup-ds4 .eup-shop .eup-shop__apply {
		transition: none;
	}
}