/* Woo action colour approved from the platform-selector reference, October 2026.
   Every rule below is scoped to Woo; shared status and DX3/Magento colours stay local. */
html:root {
  --dx3-woo-reference: #c1a6fa;
  --dx3-woo-accent: var(--dx3-woo-reference);
  --dx3-woo-on-accent: #101d2d;
  --dx3-woo-hover: color-mix(in srgb, var(--dx3-woo-accent) 90%, var(--dx3-woo-on-accent));
  --dx3-woo-ink: color-mix(in srgb, var(--dx3-woo-accent) 48%, var(--dx3-woo-on-accent));
  --dx3-woo-surface: color-mix(in srgb, var(--dx3-woo-accent) 16%, white);
  --dx3-woo-halo: color-mix(in srgb, var(--dx3-woo-accent) 24%, transparent);
}

/* Primary actions: hub, shared, Cloud/Dedicated routes and their order panels. */
body main.dxw .dxw-btn,
body main.dxw .dxw-form input[type=submit],
body main.wc-cloud .dxm-btn,
body main.wc-cloud .dxw-form input[type=submit],
body main.wc-cloud .dxm-form input[type=submit],
body main.woo-redesign .woo-button-primary,
body main.wc-cloud .dxc-order-form .single_add_to_cart_button,
body.single-product .product.type-product.product_cat-woocommerce-hosting .single_add_to_cart_button {
  background: var(--dx3-woo-accent) !important;
  border-color: var(--dx3-woo-accent);
  color: var(--dx3-woo-on-accent) !important;
}
body main.woo-redesign .woo-button-primary {
  box-shadow: 0 8px 24px var(--dx3-woo-halo);
}
body main.dxw .dxw-btn:hover,
body main.dxw .dxw-form input[type=submit]:hover:not(:disabled),
body main.wc-cloud .dxm-btn:hover,
body main.wc-cloud .dxw-form input[type=submit]:hover:not(:disabled),
body main.wc-cloud .dxm-form input[type=submit]:hover:not(:disabled),
body main.woo-redesign .woo-button-primary:hover,
body main.wc-cloud .dxc-order-form .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
body.single-product .product.type-product.product_cat-woocommerce-hosting .single_add_to_cart_button:hover:not(:disabled):not(.disabled) {
  background: var(--dx3-woo-hover) !important;
  border-color: var(--dx3-woo-hover);
  color: var(--dx3-woo-on-accent) !important;
}
body main.dxw .dxw-btn:active,
body main.wc-cloud .dxm-btn:active,
body main.woo-redesign .woo-button-primary:active {
  background: var(--dx3-woo-hover) !important;
}
body main.dxw :is(.dxw-btn, .dxw-form input[type=submit]):focus-visible,
body main.wc-cloud :is(.dxm-btn, .wc-plan-action a, .single_add_to_cart_button, .dxw-form input[type=submit]):focus-visible,
body main.woo-redesign :is(.woo-button, .woo-tier-note a):focus-visible,
body.single-product .product.type-product.product_cat-woocommerce-hosting :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--dx3-woo-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px white;
}
body main.wc-cloud .single_add_to_cart_button:is(:disabled, .disabled),
body.single-product .product.type-product.product_cat-woocommerce-hosting .single_add_to_cart_button:is(:disabled, .disabled) {
  background: var(--dx3-woo-surface) !important;
  border-color: var(--dx3-woo-accent);
  color: var(--dx3-woo-ink) !important;
}

/* Hub accent numbers, PCI frame and FAQ controls. Customer marks are left alone. */
body main.dxw .dxw-kicker,
body main.dxw :is(.dxw-pci, .dxw-section) .dxw-kicker,
body main.dxw :is(.dxw-num, .dxw-problems article > span, .dxw-migration li b, .dxw-faq summary span) {
  color: var(--dx3-woo-ink);
}
body main.dxw :is(.dxw-hero, .dxw-dark, .dxw-enquiry) .dxw-kicker {
  color: var(--dx3-woo-accent);
}
body main.dxw .dxw-pci .dxw-shell {
  border-left-color: var(--dx3-woo-accent);
}

/* Cloud/Dedicated inherit .dxm components: override only the Woo context. */
body main.dxm.wc-cloud .dxm-kicker,
body main.dxm.wc-cloud :is(.dxm-section, .dxm-pci, .dxm-enquiry) .dxm-kicker,
body main.dxm.wc-cloud :is(.dxm-num, .dxm-outcomes article > span, .dxm-migration li b, .dxm-faq summary span, .dxc-all > summary b) {
  color: var(--dx3-woo-ink);
}
body main.dxm.wc-cloud :is(.dxm-hero, .dxm-dark, .dxm-enquiry, .dxc-specs) .dxm-kicker {
  color: var(--dx3-woo-accent);
}
body main.wc-cloud .dxm-offer-featured {
  border-top-color: var(--dx3-woo-accent);
}
body main.wc-cloud .dxm-pci .dxm-shell {
  border-left-color: var(--dx3-woo-accent);
}
body main.wc-cloud .dxc-all .dxm-comparison a {
  color: var(--dx3-woo-ink);
}
body main.wc-cloud .dxc-all .dxm-comparison a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  body main.wc-cloud .dxm-comparison .wc-plan-action a {
    background: var(--dx3-woo-accent);
    color: var(--dx3-woo-on-accent);
  }
  body main.wc-cloud .dxm-comparison .wc-plan-action a:hover {
    background: var(--dx3-woo-hover);
    color: var(--dx3-woo-on-accent);
  }
}

/* Shared plan highlights and Woo recommendation links. Blue info/status stays blue. */
body main.woo-redesign .woo-eyebrow span,
body main.woo-redesign .woo-trust-strip i,
body main.woo-redesign .woo-popular {
  background: var(--dx3-woo-accent);
}
body main.woo-redesign .woo-popular {
  color: var(--dx3-woo-on-accent) !important;
}
body main.woo-redesign .woo-plan-featured {
  border-top-color: var(--dx3-woo-accent);
}
body main.woo-redesign :is(.woo-richtext li, .woo-checks li):before,
body main.woo-redesign .woo-feature-card > span {
  color: var(--dx3-woo-ink);
}
body main.woo-redesign .woo-plan-group-heading span,
body main.woo-redesign .woo-tier-note a {
  color: var(--dx3-woo-accent) !important;
}

/* Shared hosting product template: Woo product category is the scope boundary. */
body.single-product .product.type-product.product_cat-woocommerce-hosting :is(.dxhp-kicker, .dxhp-eyebrow, .dxhp-peer-grid strong) {
  color: var(--dx3-woo-ink);
}
body.single-product .product.type-product.product_cat-woocommerce-hosting :is(.dxhp-spec-panel, .dxhp-help) :is(.dxhp-kicker, .dxhp-eyebrow) {
  color: var(--dx3-woo-accent);
}

/* Architect tokens cover landing, wizard, examples, results and commerce actions. */
body .dx3-hosting-architect.dxa-woocommerce,
body .dx3-hosting-architect .dxa-woocommerce {
  --dxa-platform-action: var(--dx3-woo-accent);
  --dxa-platform-on-action: var(--dx3-woo-on-accent);
  --dxa-platform-cta: var(--dx3-woo-accent);
  --dxa-platform-on-cta: var(--dx3-woo-on-accent);
  --dxa-platform-hover: var(--dx3-woo-hover);
  --dxa-platform-surface: var(--dx3-woo-surface);
  --dxa-platform-focus-halo: var(--dx3-woo-halo);
  --dxa-accent: var(--dx3-woo-accent);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) :is(.dxa-eyebrow, .dxa-factor-number) {
  color: var(--dx3-woo-ink);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) :is(.dxa-landing-hero, .dxa-proof, .dxa-example, .dxa-header, .dxa-result-hero, .dxa-profile) .dxa-eyebrow {
  color: var(--dx3-woo-accent);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) .dxa-progress li[aria-current] {
  color: var(--dx3-woo-ink);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) .dxa-option:has(input:checked) {
  border-color: var(--dx3-woo-ink);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) input[type=radio] {
  accent-color: var(--dx3-woo-ink);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) :focus-visible {
  outline-color: var(--dx3-woo-ink);
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) .dxa-primary:focus-visible {
  outline-color: var(--dx3-woo-ink);
  box-shadow: 0 0 0 2px white;
}
body :is(.dx3-hosting-architect.dxa-woocommerce, .dx3-hosting-architect .dxa-woocommerce) .dxa-primary:disabled {
  background: var(--dx3-woo-surface);
  border-color: var(--dx3-woo-accent);
  color: var(--dx3-woo-ink);
}

/* Homepage Woo card only; the general Architect CTA and Magento card stay DX3. */
body.home .dx3-home-redesign .platform-card.woo {
  border-top-color: var(--dx3-woo-accent);
}
body.home .dx3-home-redesign .platform-card.woo .platform-mark {
  background: var(--dx3-woo-accent);
  color: var(--dx3-woo-on-accent);
}
body.home .dx3-home-redesign .platform-card.woo :is(.card-kicker, a span) {
  color: var(--dx3-woo-ink);
}
body.home .dx3-home-redesign .platform-card.woo a:focus-visible {
  outline: 3px solid var(--dx3-woo-ink);
  outline-offset: 4px;
}

/* Existing platform selector keeps its neutral default and approved purple hover. */
body .dx3-architect-options .dx3-architect-option[href*='/hosting-architect/woocommerce/']:is(:hover, :focus-visible) {
  background: var(--dx3-woo-accent) !important;
}
body .dx3-architect-options .dx3-architect-option[href*='/hosting-architect/woocommerce/']:is(:hover, :focus-visible) :is(strong, span) {
  color: var(--dx3-woo-on-accent) !important;
}

/* Woo mega-menu branch only; navigation labels and tree remain unchanged. */
body .dx-header .dx3-grouped-menu {
  --dx3-woo-accent: var(--dx3-woo-reference);
}
.dx-header .dx3-menu-group:has(> a[href*='/services/woocommerce-hosting/']) > .dx3-menu-heading {
  box-shadow: inset 3px 0 var(--dx3-woo-accent);
  color: var(--dx3-woo-ink);
}
.dx-header .dx3-menu-group:has(> a[href*='/services/woocommerce-hosting/']) .dx3-menu-types {
  border-left-color: var(--dx3-woo-accent);
}
.dx-header .dx3-menu-group:has(> a[href*='/services/woocommerce-hosting/']) .dropdown-item:is(:hover, :focus-visible) {
  background: var(--dx3-woo-surface);
  color: var(--dx3-woo-ink);
  box-shadow: inset 3px 0 var(--dx3-woo-accent);
}
.dx-header .dx3-menu-group:has(> a[href*='/services/woocommerce-hosting/']) .dropdown-item:focus-visible {
  outline-color: var(--dx3-woo-ink);
}