/*
 * Bootstrap's a:focus and button:focus rules apply a large blue browser ring
 * even on pointer clicks. Apply one policy across frontend templates, including
 * full-card ghost links, rather than patching individual artwork components.
 * The scoped !important declarations also beat legacy button outline resets.
 * Keep hover styles, artwork shadows and form-field styling unchanged.
 */
#page :is(a, button):focus:not(:focus-visible) {
  outline: none !important;
}

/* Keyboard users still need to see which link/control will activate. Use a
 * restrained neutral ring instead of the browser's blue automatic outline. */
#page :is(a, button):focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 3px;
}

/* WooCommerce focuses these non-interactive notice containers to announce
 * cart/checkout updates. Keep that focus and role=alert behavior, but omit the
 * browser ring around the entire banner. Links/buttons inside keep the
 * keyboard-only indicator above; semantic success/error borders are unchanged. */
#page :is(.woocommerce-message, .woocommerce-error, .woocommerce-info,
  .woocommerce-notices-wrapper, .wc-block-components-notice-banner):focus {
  outline: none !important;
}

/* Reusable theme teal is decorative at its original value, but body-size links
 * need the darker companion below to meet WCAG AA against white and warm gray. */
#page :is(.woocommerce-LostPassword, .woocommerce-privacy-policy-text) a,
#page .wp-block-query-pagination-next {
  color: #2d716b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#page .haystack-native-shop .mobile-filters-toggle {
  color: #2d716b;
}

/* Legacy artist tabs use gray to signal inactivity. This darker neutral keeps
 * that hierarchy while remaining readable at their small uppercase size. */
#page .product-bottom-tabs-wrapper .tabs li:not(.active) a {
  color: #666;
}

/* The original magenta remains in the brand palette, but its legacy value is
 * too light for small button text on white. This companion shade preserves the
 * hue and meets AA without changing filled artwork or decorative accents. */
#page .magenta-button {
  border-color: #9d4a87;
  color: #9d4a87;
}

#page .magenta-button:hover,
#page .magenta-button:focus,
#page .magenta-button:active {
  border-color: #9d4a87;
  background-color: #9d4a87;
  color: #fff;
}