/*
 * ReactWoo Atomic - shared interaction states (hover / focus / active) for widget controls.
 *
 * Why this file exists: Hello Elementor's reset.css styles every button and link:
 *   [type=button]:hover, [type=button]:focus, button:hover, button:focus { background-color:#c36; color:#fff }
 *   [type=button], button { color:#c36; border:1px solid #c36 }
 *   a:hover, a:active { color:#336 }
 * Widget rules are mostly single-class (0,1,0), so they lost to those (0,1,1)/(0,2,0) selectors:
 * hover/focus showed a pink #c36 fill (often with brand-purple text, 1.13:1) or #336 text on
 * brand-purple buttons (2.08:1), and some close/icon buttons rendered #c36 at rest.
 *
 * Every selector below starts with `body` (+0,0,1), so it outranks the theme's selectors whatever
 * the stylesheet order. Colours are Figma tokens (00 Foundations 10:24). Figma defines the focus
 * state (10:188: 2px ring, 2px offset) but no hover/active state; hover/active are derived from the
 * same token and listed as design decisions (primary darkened, secondary -> Canvas fill).
 */
:root {
	--rwa-ui-primary: #6740ff;
	--rwa-ui-primary-hover: #5230d9; /* derived; white text 7.54:1 (already the Carousel CTA hover) */
	--rwa-ui-primary-active: #4524c2; /* derived; white text 9.19:1 */
	--rwa-ui-on-primary: #ffffff;
	--rwa-ui-text: #121621;
	--rwa-ui-ink: #111522;
	--rwa-ui-muted: #6b7591;
	--rwa-ui-canvas: #f6f8fc;
	--rwa-ui-surface: #ffffff;
	--rwa-ui-border: #dee3ed;
	--rwa-ui-soft: #ebe3ff;
	--rwa-ui-soft-hover: #dcd0ff; /* derived; #5230d9 text 5.21:1 */
	--rwa-ui-focus: #6740ff;
}

/* ---- Primary (brand fill, white label) ---------------------------------------------------- */
:where(body) :is( .rwa-offcanvas__trigger, .rwa-modal__trigger, .rwa-ai-concierge__send, .rwa-ai-concierge__confirm-btn, .rwa-pro-leaf__cta, .rwa-pro-leaf__chip.is-active, .rwa-dynamic-mega-menu__cta, .rwa-cart-drawer__checkout, .rwa-product-table__add, .rwa-directory-map__pin, .rwa-dynamic-table__page.is-current ):where(:is(:hover, :focus)):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-primary-hover);
	border-color: var(--rwa-ui-primary-hover);
	color: var(--rwa-ui-on-primary);
	text-decoration: none;
}
:where(body) :is( .rwa-offcanvas__trigger, .rwa-modal__trigger, .rwa-ai-concierge__send, .rwa-ai-concierge__confirm-btn, .rwa-pro-leaf__cta, .rwa-pro-leaf__chip.is-active, .rwa-dynamic-mega-menu__cta, .rwa-cart-drawer__checkout, .rwa-product-table__add, .rwa-directory-map__pin, .rwa-dynamic-table__page.is-current ):where(:active):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-primary-active);
	border-color: var(--rwa-ui-primary-active);
	color: var(--rwa-ui-on-primary);
}

/* ---- Secondary (white surface, border, text label) ---------------------------------------- */
:where(body) :is( .rwa-ai-concierge__cancel, .rwa-pro-leaf__chip:not(.is-active, .is-applied, .is-ghost, .is-clear), .rwa-carousel__add-slide, .rwa-product-table__step, .rwa-dynamic-table__page:not(.is-current) ):where(:is(:hover, :focus, :active)):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-text);
	text-decoration: none;
}
/* Disabled pager button (Figma 402:58 Prev on page 1) stays Canvas / muted under the theme's hover. */
:where(body) .rwa-dynamic-table__page:is(:disabled, [aria-disabled="true"]):where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-muted);
}
/* Cart trigger keeps its own brand border on hover (cart-drawer.css intent). */
:where(body) .rwa-cart-drawer__trigger:is(:hover, :focus, :active) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-primary);
	color: var(--rwa-ui-text);
}

/* ---- Chips: clear / ghost / applied -------------------------------------------------------- */
:where(body) .rwa-pro-leaf__chip.is-clear:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-text);
}
:where(body) .rwa-pro-leaf__chip.is-ghost:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: transparent;
	color: var(--rwa-ui-text);
}
:where(body) .rwa-pro-leaf__chip.is-applied:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-soft-hover);
	border-color: transparent;
	color: var(--rwa-ui-primary-hover);
}

/* ---- Text links / nav triggers (no fill) --------------------------------------------------- */
:where(body) :is(.rwa-dynamic-mega-menu__link, .rwa-dynamic-mega-menu__item, .rwa-dynamic-mega-menu__trigger):is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-primary);
	text-decoration: none;
}
:where(body) .rwa-dynamic-mega-menu__trigger.is-active:where(:is(:hover, :focus, :active)) {
	color: var(--rwa-ui-primary-hover);
}

/* ---- Icon / close buttons (transparent) ---------------------------------------------------- */
body :is(.rwa-cart-drawer__close, .rwa-quick-view__close, .rwa-hotspots__close, .rwa-quick-view__trigger) {
	color: var(--rwa-ui-ink);
	border-color: transparent;
}
:where(body) :is(.rwa-cart-drawer__close, .rwa-quick-view__close, .rwa-hotspots__close):is(:hover, :focus, :active) {
	background-color: var(--rwa-ui-canvas);
	color: var(--rwa-ui-ink);
}
:where(body) .rwa-quick-view__trigger:is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-ink);
}

/* ---- Variation swatches (label under a colour chip) ---------------------------------------- */
:where(body) .rwa-variation-swatches__swatch:is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-text);
}

/* ---- Product Table sort pill / Dynamic Table header sort ------------------------------------ */
/* Sort pill: the native select is visually reset, so the pill (label) carries hover + focus. */
:where(body) .rwa-product-table__sort:hover {
	background-color: var(--rwa-ui-canvas);
	color: var(--rwa-ui-text);
}
:where(body) .rwa-product-table__sort:focus-within {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
:where(body) .rwa-product-table__sort-select:is(:hover, :focus, :active) {
	background-color: transparent;
	color: inherit;
	outline: none;
}
/* Header sort buttons sit on the #111522 header row: keep white text, underline on hover. */
:where(body) .rwa-dynamic-table__sort:is(:hover, :focus, :active) {
	background-color: transparent;
	border-color: transparent;
	color: var(--rwa-ui-on-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Focus ring (Figma 10:188: 2px ring, 2px offset, brand) -------------------------------- */
:where(body :is([data-e-type^="reactwoo"], [data-element_type^="reactwoo"], [data-widget_type^="reactwoo"])) :is(a[href], button, [role="button"], [role="tab"], [tabindex="0"], input[type="submit"], input[type="button"]):where(:focus-visible),
:where(body) :is([data-e-type^="reactwoo"], [data-element_type^="reactwoo"], [data-widget_type^="reactwoo"])[tabindex="0"]:where(:focus-visible),
:where(body) :is(.rwa-modal__trigger, .rwa-modal__close, .rwa-marquee__viewport):focus-visible {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
/* On the dark #111522 table header the brand ring is 2.5:1, so the ring turns white (15.9:1). */
:where(body .rwa-dynamic-table .rwa-dynamic-table__head) .rwa-dynamic-table__sort:focus-visible {
	outline-color: var(--rwa-ui-on-primary);
}

/* V4 priority: normal declarations of capped selectors, re-emitted in original specificity order. */
:where(body) .rwa-cart-drawer__trigger:is(:hover, :focus, :active) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-primary);
	color: var(--rwa-ui-text);
}
:where(body) :is(.rwa-dynamic-mega-menu__link, .rwa-dynamic-mega-menu__item, .rwa-dynamic-mega-menu__trigger):is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-primary);
	text-decoration: none;
}
:where(body) :is(.rwa-cart-drawer__close, .rwa-quick-view__close, .rwa-hotspots__close):is(:hover, :focus, :active) {
	background-color: var(--rwa-ui-canvas);
	color: var(--rwa-ui-ink);
}
:where(body) .rwa-quick-view__trigger:is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-ink);
}
:where(body) .rwa-variation-swatches__swatch:is(:hover, :focus, :active) {
	background-color: transparent;
	color: var(--rwa-ui-text);
}
:where(body) .rwa-product-table__sort:hover {
	background-color: var(--rwa-ui-canvas);
	color: var(--rwa-ui-text);
}
:where(body) .rwa-product-table__sort:focus-within {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
:where(body) .rwa-product-table__sort-select:is(:hover, :focus, :active) {
	background-color: transparent;
	color: inherit;
	outline: none;
}
:where(body) .rwa-dynamic-table__sort:is(:hover, :focus, :active) {
	background-color: transparent;
	border-color: transparent;
	color: var(--rwa-ui-on-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
:where(body) :is(.rwa-modal__trigger, .rwa-modal__close, .rwa-marquee__viewport):focus-visible {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
:where(body) .rwa-dynamic-table__page:is(:disabled, [aria-disabled="true"]):where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-muted);
}
:where(body) .rwa-pro-leaf__chip.is-clear:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-text);
}
:where(body) .rwa-pro-leaf__chip.is-ghost:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-canvas);
	border-color: transparent;
	color: var(--rwa-ui-text);
}
:where(body) .rwa-pro-leaf__chip.is-applied:where(:is(:hover, :focus, :active)) {
	background-color: var(--rwa-ui-soft-hover);
	border-color: transparent;
	color: var(--rwa-ui-primary-hover);
}
:where(body) .rwa-dynamic-mega-menu__trigger.is-active:where(:is(:hover, :focus, :active)) {
	color: var(--rwa-ui-primary-hover);
}
:where(body) :is([data-e-type^="reactwoo"], [data-element_type^="reactwoo"], [data-widget_type^="reactwoo"])[tabindex="0"]:where(:focus-visible) {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
:where(:where(body :is([data-e-type^="reactwoo"], [data-element_type^="reactwoo"], [data-widget_type^="reactwoo"]))) :not(.rwa-v4-0):where(:is(a[href], button, [role="button"], [role="tab"], [tabindex="0"], input[type="submit"], input[type="button"])):where(:where(:focus-visible)) {
	outline: 2px solid var(--rwa-ui-focus);
	outline-offset: 2px;
}
:where(body) :is( .rwa-offcanvas__trigger, .rwa-modal__trigger, .rwa-ai-concierge__send, .rwa-ai-concierge__confirm-btn, .rwa-pro-leaf__cta, .rwa-pro-leaf__chip.is-active, .rwa-dynamic-mega-menu__cta, .rwa-cart-drawer__checkout, .rwa-product-table__add, .rwa-directory-map__pin, .rwa-dynamic-table__page.is-current ):where(:is(:hover, :focus)):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-primary-hover);
	border-color: var(--rwa-ui-primary-hover);
	color: var(--rwa-ui-on-primary);
	text-decoration: none;
}
:where(body) :is( .rwa-offcanvas__trigger, .rwa-modal__trigger, .rwa-ai-concierge__send, .rwa-ai-concierge__confirm-btn, .rwa-pro-leaf__cta, .rwa-pro-leaf__chip.is-active, .rwa-dynamic-mega-menu__cta, .rwa-cart-drawer__checkout, .rwa-product-table__add, .rwa-directory-map__pin, .rwa-dynamic-table__page.is-current ):where(:active):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-primary-active);
	border-color: var(--rwa-ui-primary-active);
	color: var(--rwa-ui-on-primary);
}
:where(body) :is( .rwa-ai-concierge__cancel, .rwa-pro-leaf__chip:not(.is-active, .is-applied, .is-ghost, .is-clear), .rwa-carousel__add-slide, .rwa-product-table__step, .rwa-dynamic-table__page:not(.is-current) ):where(:is(:hover, :focus, :active)):where(:not(:disabled, [aria-disabled="true"])) {
	background-color: var(--rwa-ui-canvas);
	border-color: var(--rwa-ui-border);
	color: var(--rwa-ui-text);
	text-decoration: none;
}
:where(body .rwa-dynamic-table .rwa-dynamic-table__head) .rwa-dynamic-table__sort:focus-visible {
	outline-color: var(--rwa-ui-on-primary);
}