/* Shared interaction layer. Keep widget-specific colors, sizes and radii editable.
 * Only CTA controls are included: never navigation, quantity or modal controls. */
body :is(.elementor-button, .kitify-button, .vhero-btn, .vfit-btn,
  .cfg-summary .btn, .cmp-foot .btn, .wc-block-cart__submit-button,
  .wp-block-button__link, input[type="submit"], button[type="submit"],
  .button:not(.wcboost-wishlist-button):not(.velorax-button--text)) {
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  vertical-align: middle;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Baseline for theme/WooCommerce CTAs; Elementor's own size controls take priority. */
body :is(.wp-block-button__link, input[type="submit"], button[type="submit"],
  .button:not(.wcboost-wishlist-button):not(.velorax-button--text)) {
  min-height: 44px;
  line-height: 1.4;
  border-width: 1px;
  border-radius: var(--site-button-radius);
}

/* Fallback hover palette comes from Theme Settings. Explicit widget styles win. */
body :is(.elementor-button, .kitify-button, .wc-block-cart__submit-button,
  .wp-block-button__link, input[type="submit"], button[type="submit"],
  .button:not(.wcboost-wishlist-button):not(.velorax-button--text)):hover {
  background-color: var(--site-button-hover-bg);
  color: var(--site-button-hover-color);
  border-color: var(--site-button-hover-bg);
}

/* Keyboard focus must remain visible on both light and dark section backgrounds. */
/* Catalog actions are persistently visible, unlike the legacy image-hover overlay. */
body .catalog-products .product-item__actions,
body .catalog-products .product-item__actions .button {
  pointer-events: auto;
}

body .button:not(.wcboost-wishlist-button):not(.velorax-button--text):focus:not(:hover) {
  background-color: var(--site-primary-button-bg);
  color: var(--site-primary-button-color);
  border-color: var(--site-primary-button-bg);
}

/* These commerce templates have more specific legacy transparent/white hover rules. */
body.woocommerce :is(.product .cart, .wc-proceed-to-checkout,
  .woocommerce-checkout-payment .place-order, .woocommerce-mini-cart__buttons) .button:hover,
body .widget.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons.buttons .button:hover {
  background-color: var(--site-button-hover-bg);
  color: var(--site-button-hover-color);
  border-color: var(--site-button-hover-bg);
}

body :is(.elementor-button, .kitify-button, .vhero-btn, .vfit-btn,
  .cfg-summary .btn, .cmp-foot .btn, .wc-block-cart__submit-button,
  .wp-block-button__link, input[type="submit"], button[type="submit"], .button):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--site-bg-color);
}

/* Keep specialty bike CTAs anchored; retain their editable section palette. */
body :is(.vhero-btn, .vfit-btn, .cfg-summary .btn, .cmp-foot .btn) {
  min-height: 44px;
  letter-spacing: normal;
}
body :is(.vhero-btn, .vfit-btn, .cfg-summary .btn, .cmp-foot .btn):hover {
  transform: none;
  opacity: 1;
  box-shadow: inset 0 0 0 1px currentColor;
}

body :is(.elementor-button, .kitify-button, .vhero-btn, .vfit-btn,
  .cfg-summary .btn, .cmp-foot .btn, .wp-block-button__link,
  input[type="submit"], button[type="submit"], .button):is(:disabled, [aria-disabled="true"], .disabled, .loading) {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body :is(.elementor-button, .kitify-button, .vhero-btn, .vfit-btn,
    .cfg-summary .btn, .cmp-foot .btn, .wc-block-cart__submit-button,
    .wp-block-button__link, input[type="submit"], button[type="submit"], .button) {
    transition: none !important;
    animation: none !important;
  }
}